/* BusinessEngine Server WebUI 自前CSS(project-authored・vendored assetではない)。 便H-3(0563-auditor起票)で新設・便J1(0701/0702-auditor起票・WebUI第3期波)で全面再構成。 【便J1方針(0702裁定)】docs/Design/keiyaku-4screens.html(fixture)をgolden(視覚基準)とし、 fixtureのCSS体系(:root変数群+部品スタイル)をそのまま移植する。従来の「変数実測値を固定値 として転記」方式(H-3〜H-6ab)は廃止し、fixture原文の変数参照へ揃える(値は同一・保守性で fixture との diff 照合を容易にするため)。fixture専用装飾(.doc-head/.frame/.browser-bar/ .ann/.notes/details.decl等のモック枠・注記系)は移植対象外(分類表=0703-producer便 §2)。 primer.css(.markdown-body)の英文向け既定(16px基準・h1 2em・table width:max-content)は 本ファイル後段の「markdown-body打ち消し層」でfixture体系へ上書きする。 */ /* ===== fixture :root変数(keiyaku-4screens.html逐語移植・便J1) ===== 便UX-033b(0995-auditor起票・2026-08-26): `--border-muted`は元々fixture原文どおりの命名 だったが、Primer CSS(`primer.css`)側にも同名変数(`--border-muted: var(--borderWidth-default) solid var(--borderColor-muted)`・borderショートハンド全体を保持)が定義されておりCSS変数名が 衝突していた。`:root`(詳細度0,1,0)よりPrimer側の属性セレクタ(`[data-color-mode=light] [data-light-theme=light]`等・詳細度0,2,0)の方が高いため、``要素上ではPrimer側の値が 常に勝ち、本fileの色値定義は一切適用されない。`var(--border-muted)`をcolor値として使う 箇所(`border-bottom:1px solid var(--border-muted)`等)は、実際には `border-bottom:1px solid (0.0625rem solid #d1d9e0b3)`という構文不正な値に展開され、 invalid at computed-value timeとなり宣言全体(border-bottom)が無効化される実害があった (ref検索候補の罫線区切りが0pxになる・ux線0048実測)。`--be-border-muted`(project-authored 接頭辞)へ改名しPrimer側の変数を一切参照しない構造へ是正した——fixture視覚体系との差分は 変数名のみで値は無変更(diff照合可能性を保つ便J1方針は維持)。他17変数(`--canvas`等)は Primer側に同名定義が存在しないことを全数確認済み(棚卸し・0995 §2-3)。 ===== */ :root{ --canvas:#ffffff; --subtle:#f6f8fa; --inset:#eff2f5; --border:#d1d9e0; --be-border-muted:#e4e9ee; --fg:#1f2328; --muted:#59636e; --faint:#818b98; --accent:#0969da; --success:#1a7f37; --success-bg:#dafbe1; --attention:#9a6700; --attention-bg:#fff8c5; --danger:#d1242f; --danger-bg:#ffebe9; --done:#8250df; --done-bg:#fbefff; --shadow:0 1px 2px rgba(31,35,40,.06); } *{box-sizing:border-box} /* 全体基準(fixture body逐語+H-6ab密度13px維持)。font-familyの日本語stack明示は 便J1の中核fix——app.cssに従来font-family指定が無くprimer.cssの英文向けstackに依存して いたため、ブラウザごとの日本語フォント選択・合成差(Safari顕在化・指摘③)を招いていた。 背景はfixtureの.page(アプリ画面本体)=canvas白を採用(fixture body=insetはモック枠外の 台紙色であり実機の全画面アプリには適用しない・0703 §2判断表)。 */ body{margin:0;background:var(--canvas);color:var(--fg); font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif; font-size:13px;line-height:1.5} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} /* ===== markdown-body打ち消し層(便J1) ===== primer.cssの.markdown-bodyはGitHub Markdown文書向けの既定(font-size:16px・h1 2em=32px・ h2 1.5em=24px・table{display:block;width:max-content}=内容幅に縮む)を持ち、これが 指摘①(タイトル過大)・③(サイズまちまち=main内16px基準とapp.css密度13pxの2系統混在)・ ④(表がウィンドウ幅に広がらない)の直接原因だった(0703 §3実測)。fixtureの視覚体系 (基準13px・h1 16px/h2 15px・表は全幅)へ上書きする。 */ .markdown-body{font-size:13px;line-height:1.5; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif} .markdown-body h1{font-size:16px;font-weight:600;margin:0 0 6px;padding-bottom:0;border-bottom:0} .markdown-body h2{font-size:15px;font-weight:600;margin:10px 0 4px;padding-bottom:0;border-bottom:0} .markdown-body table{display:table;width:100%;max-width:100%} main.markdown-body{padding:10px 18px 16px} /* ===== ボタン・入力(fixture逐語・便J1で:hover/btn-primary/btn-danger/focus/select補完) ===== */ .btn{display:inline-block;padding:3px 11px;font-size:12.5px;font-weight:500;line-height:1.5; border:1px solid var(--border);border-radius:6px;background:var(--subtle);color:var(--fg);cursor:pointer} .btn:hover{background:#eef1f4;text-decoration:none} .btn-primary{background:#1f883d;border-color:rgba(31,35,40,.15);color:#fff} .btn-primary:hover{background:#1a7f37} .btn-danger{color:var(--danger)} /* 便CT-DASH-srv-2a(0629/0632-auditor起票): 頁3「講義プログラム（準備中）」ボタンの無効表示 (srv-4まで実際のリンク先を作らない・クリック不可を視覚的に示す)。 */ .btn.disabled{cursor:default;opacity:.55;pointer-events:none} .form-control{width:100%;padding:3px 8px;font-size:13px;border:1px solid var(--border); border-radius:5px;background:var(--canvas);color:var(--fg)} .form-control:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)} select.form-control{appearance:auto} .num{text-align:right;font-variant-numeric:tabular-nums} .req{color:var(--danger);font-weight:600;margin-left:2px} /* 便U1(0732-auditor起票・系統A-1・UX-002/004/005/007/008): Primer `.form-group`のform系規則 (`.form-group .form-control{width:440px;background-color:muted}`・ `.form-group textarea.form-control{height:200px;min-height:200px}`)を打ち消す。実装は`FIV-7`の `div.form-group`(label+制御要素の対)を全画面で使うため、Primerのform-group規則が常に効いてしまい、 固定440px幅がgrid(`repeat(N,1fr)`)の暗黙最小値(min-content)を発火させてref列を圧縮していた (詳細は`docs/Design/UI-Design-Backlog.md` §9 UX-002/007・A-2のgrid修正とセットで解消)。 両セレクタとも詳細度がPrimer側と同一(0,2,0/0,2,1)——app.cssはprimer.cssの後に読み込まれるため source order勝ちで上書きできる(`PageLayout.swift`の``順)。 */ .form-group .form-control{width:100%;max-width:100%;margin-right:0;background-color:var(--canvas)} .form-group textarea.form-control{width:100%;height:auto;min-height:0} /* 便FORM-1(UX-087・1851-auditor起票): 上記`width:100%`は日時・数値系入力欄まで親幅いっぱいに 伸ばしてしまう(formSections未宣言formの親幅1330pxでそのまま伸長・ux 0231実測)。型別に `max-width`の上限を設け、値の桁数に対して不自然に広い入力欄を防ぐ(最重要原則#7の趣旨= 数値は右揃え+桁を視覚的に確認できる密度を保つ、と整合)。text/select/ref型は対象外 (自由記述・選択式で長さの妥当な上限が型から一意に決まらないため)。詳細度(0,3,0)で `.form-group .form-control`(0,2,0)に勝つ。em値は1366×768のヘッドレスブラウザ実測 (`.form-control`のcomputed font・canvas measureTextによる値文字列の実描画幅測定)で 「符号+小数点付き最悪ケース値がスクロールなしで収まる最小幅+視覚的余白」として確定した (fact申告・1851裁定原文の目安〔金額14em/日付12em/日時16em〕より実測値は小さい—— money/quantity/decimal/unitPriceの実際の入力値はカンマ区切りを持たない生の数字列 〔`numeric-input-init.js`が全角→半角変換のみ行いカンマ整形はしない〕ため、想定より 短い文字幅で足りる)。 */ .form-group .form-control[inputmode="decimal"]{max-width:12em} .form-group .form-control[data-flatpickr="date"]{max-width:10em} .form-group .form-control[data-flatpickr="datetime"]{max-width:15em} /* 便U3-f(0802-auditor起票UX-024・ユーザー裁定「全画面一律で直す」): Primer `.form-group.errored .error{position:absolute;z-index:10;...}`(吹き出し様式)はform-group内で 入力欄直下に浮かせ、その下に別要素が続かない前提の様式。BADP-14/15(`BackdateAwareDatePicker.md`)が 日付欄・理由欄を同一セルへ縦積みした構造と噛み合わず、絶対配置ゆえ後続要素を押し下げないため 後続ラベルへ重なっていた(UX-024)。`.note.error`(`

`)へ`position:static`を 当て通常フローへ戻し後続要素を押し下げる——BADP配下限定にせず全画面一律(浮かぶ表示は後続要素が ある限り常に同種の重なりを起こすため)。枠線装飾(primerの`::before`/`::after`三角形)は残る。 */ /* 便UX-078b(1602-auditor起票・ユーザー裁定「全画面一律で直す」・UX-024と同型の考え方): primerの`.form-group.errored .error`もPrimer本体の`.note`(muted色)も文字色を明示せず、 `.note.error`は既定文字色(黒)のまま表示されていた——ラベル・入力枠はdanger赤になるのに メッセージ本文だけ黒という不一致(便UX-078・実機視覚確認で発見)。`--danger`(#d1242f)は 実測したラベル色(rgb(209,36,47))と同一値のため、ラベル・枠・文字を揃える。 */ .form-group.errored .note.error{position:static;color:var(--danger)} /* 便UX-079(1605-auditor起票・ユーザー裁定A): 素の`class="error"`(複数画面に散在していた Primer未対応の無装飾エラー段落・12箇所)を`.flash.flash-error`(便UX-046で確立済み)へ 統一し、`.error`はPrimer本来のfield帰属専用(`.form-group.errored .error`/`.note.error`)へ 役割を戻した。念のため、素の`.error`が将来再導入されても無装飾で沈黙させないfallback (danger文字色のみ)を置く——詳細度(0,1,0)は`.form-group .error{display:none}` (primer.css・0,2,0)にも`.form-group.errored .error{…}`(primer.css・0,3,0)にも負けるため、 既存のPrimer挙動(非errored時は非表示・errored時は吹き出し様式)には一切影響しない。 */ .error{color:var(--danger)} /* 便UX-079(1605-auditor起票・ユーザー裁定B): `.dating-warning`(`BackdateAwareDatePicker`の forbidden系事前警告——入力エラーではなく「未来/過去日時は入力できません」という案内)は 親div.form-group内への帰属は既に満たされており(BADP-10)、欠けていたのは色のみだった。 `.note.error`(便UX-078b)と同型に文字色のみを与える(エラーではなく事前警告であることを danger赤と区別するためattentionトーンを使う・背景/枠は付けない)。DOM位置・親構造は 変えない(色のみのfix)。 */ .dating-warning{color:var(--attention)} /* 便UX-038(1004/1006-auditor起票・ux線0058): Primer`.form-group{margin:15px 0}`が `BackdateAwareDatePicker.render`(BADP-14)の内側`div.form-group`(日付欄自体のサブgroup・ `errored`時の理由欄サブgroupも同型)にも適用され、外側`div.form-group`(grid item本体)内で 独自のmarginを持ってしまう。実機実測(1366×768)で「適用日時」ラベルが「摘要」(単一階層の `.form-group`)より15px下にずれる原因(外側grid item自体のtopは両者一致=grid配置は正しい)。 `.form-group`が`.form-group`の直接の子として出現するのは本file(BADP)構造のみ (`grep -rn 'class="form-group'` 全画面横断で確認済み)のため、直接子孫セレクタで ネストされた内側`.form-group`のmarginのみを打ち消す(他画面の単一階層`.form-group`には 一切影響しない)。BADP-16と同様、Swiftコード(HTML構造)は無改修——CSS側の根治。 */ .form-group > .form-group{margin:0} /* stateTones バッジ(§10.4.7〔#dsl-state-tones〕)。クラス名はtone値そのもの (attention/positive/critical/neutral/done・閉じた5値)。fixtureの日本語state名セレクタ (.st-申込等)は採らず、既存tone 5値方式を維持する(0627裁定・意図的差分——色値はfixtureの 対応変数と同一)。 */ .st{display:inline-block;padding:0 9px;font-size:11px;font-weight:600;border-radius:11px} .st-attention{background:var(--attention-bg);color:var(--attention)} .st-positive{background:var(--success-bg);color:var(--success)} .st-critical{background:var(--danger-bg);color:var(--danger)} .st-neutral{background:var(--inset);color:var(--muted)} .st-done{background:var(--done-bg);color:var(--done)} /* 行トーン(便UXB-9a・1354裁定・ユーザー裁定㉒): stateTonesのtoneがcritical/attentionの 行のみ左太線+背景色で強調する(positive/done/neutralは行反映なし・全塗りは一覧が色で 埋まり緊急行が埋没するため不採用)。既存tone変数を流用し`.flash-error`と同型のパターン (左太線+背景色)を踏襲する。クラス名は`.st-*`(stateバッジ)と対になる`tone-*`。 */ tr.tone-critical td{background:var(--danger-bg);border-left:4px solid var(--danger)} tr.tone-attention td{background:var(--attention-bg);border-left:4px solid var(--attention)} /* ===== 一覧(fixture逐語・§10.4.8〔#dsl-search-filter〕) ===== */ .toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap} /* toolbar内form=検索窓+チェックボックスの横並び(便J2・0701指摘⑨)。labelはnowrapで 折り返しを止める(fixtureはtoolbar内のform/checkbox構造を規定しないためproducer裁量)。 */ .toolbar form{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .toolbar label.chk{white-space:nowrap;display:inline-flex;align-items:center;gap:4px; font-size:12.5px;color:var(--muted)} .toolbar .search{flex:0 1 260px;position:relative} .toolbar .search input{padding-left:26px} .toolbar .search::before{content:"⌕";position:absolute;left:8px;top:2px;color:var(--faint);font-size:14px;pointer-events:none} /* 一覧の新規作成ボタン右端寄せ(便J3・0703指摘⑬)。fixture第2弾(SCREEN 1一覧)の span[style=margin-left:auto]写像をclass化したもの。 */ .toolbar .new-act{margin-left:auto} .chips{display:flex;gap:5px;flex-wrap:wrap} /* 便SEARCH-POST-1(0420/0422/0424-auditor起票): 絞り込みchip(「廃止済みも表示」トグル・filterBy チップ)は検索語等がURLへ残らないよう``から`

`+`