/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ 2ペインの「1枚の窓」（共通） 2026-08-29の利用者指摘（物件情報の実画面を見て）:「左右ペインの一体感が ありません。**外枠は標準ではないのですか？**」。 文書保存だけに入れていた1枚の窓（PR #2320／#2323）を、**2ペインの ワークスペース全部の標準**へ昇格した。見た目はここ1か所が持ち、画面は 自分の寸法と中身だけを書く。**画面ごとに同じ枠線・角丸・面の色を書き写さない。** 枠線の色・角丸・面の色はCHATブロック（`core/css/elsa_chat.css`の `.elsaChatBlock`）と同じ値である。CHATが自分のブロックの中で定義している 値なので、こちらも共通のトークンとして同じ数値を持ち、**祖先セレクタで CHATの中を書き換えることはしない**（`docs/architecture.md`のブロック規則）。 ┌────────────────────────────┐ │ 帯（件数・期間などの1行） │ ├───────┬─┬────────────────┤ │ 左のペイン │ │ 右のペイン │ │（階層） │ │（台帳・工程・流れ） │ └───────┴─┴────────────────┘ ↑ 境界（幅を変える取っ手。窓の内部区切りを兼ねる） 窓に入るのは**2ペインとその直上の帯**だけである。ページ見出し・パンくず・ CONTROLLERは窓の外に置く（文書保存と同じ整理）。 **中の部品は自分の枠を持たない。** 左のペインのTREEは枠とラベルタブを この面へ溶かす。溶かす規則は`.elsaPaneWindow`の中だけに閉じるので、 他の画面のTREE・FIELDの見た目は1pxも変わらない。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ .elsaPaneWindow { /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **枠線と帯の面は外観のトークンから受ける**（Issue #2689 段階3） それまでは`#d2d2d2`と`#f5f7f9`を直に書いており、CHATブロックが自分の中で 持つ同じ値、`base.css`の同じ意味の値と合わせて、3か所に同じ数字が並んで いた。境界は`--elsa-border`（右ペインの文字色と背景色から**計算で導く**）。 **帯の面は外観設定「ボタンエリアの背景色」である**（`band_background_color` →`--elsa-band-background-color`。2026-09-16のオーナー決定・Issue #3798）。 それまではベース色（`--elsa-surface-sunken`）を直に読んでおり、「ボタンエリア の背景色」を変えても統合窓の操作行・道具の行に反映されなかった。**パンくず行 （`.elsaPaneWindowTrail`）だけは別**——パンくずは「ヘッダー背景色」を持つので、 下の詳しさ勝ちの規則で個別に上書きする。 **画面ごとの名前（`--elsa-pane-window-*`）は残す。** ここが窓の寸法・ 見た目の正本であることは変わらず、値の出どころだけを共通トークンへ 移した。窓の中の部品はこれまでどおりこの名前を読む。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ --elsa-pane-window-border: var(--elsa-border, #d2d2d2); --elsa-pane-window-radius: 10px; --elsa-pane-window-band: var(--elsa-band-background-color, #f5f7f9); /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **帯の隙間は3つの値だけ**（2026-09-06の利用者指摘「右ペインのボタンエリアの 上下左右の隙間が画面によって異なる」） それまでは、行そのもの・行の中のまとまり・一覧ツールバー・検索枠の器が **それぞれ自分で数字を書いていた**（`8px`／`6px`／`3px 0`／`0 10px`）。 同じ意味の余白が4通りあったので、画面によって上下左右が違って見えた。 * `--elsa-pane-window-band-padding-block` … 行の**上下**の内側余白 * `--elsa-pane-window-band-padding-inline` … 行の**左右**の内側余白。 検索枠の器（別のマス）も同じ値を読むので、行の左端と検索の右端が揃う * `--elsa-pane-window-band-gap` … **ボタン同士**の隙間。行の中の入れ子の まとまり（画面ごとの器・CONTROLLER・一覧ツールバー）も全部これを読む **画面ごとのCSSはこの3つを宣言しない。** 上書きが1つでも残ると、その画面 だけが違う余白になる（見張りは`tests/app_explorer_test.php`）。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ --elsa-pane-window-band-padding-block: 6px; --elsa-pane-window-band-padding-inline: 10px; --elsa-pane-window-band-gap: var(--elsa-block-action-gap, 6px); /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **帯の高さは1つの式で決まる**（2026-09-06の利用者指摘。出荷指示画面 Ver.`5437a74d`で「検索ボックスの上下の隙間がほとんど無く、他画面と高さが違う」） 原因は、**検索枠が帯とは別のマス**（`rsearch`）に立っていて、上下の余白も 最低の高さも持っていなかったことである。ボタンのある画面の行は 「上下の余白＋ボタンの高さ」で立つのに、**検索しか無い画面の行は入力欄の 高さそのもの**になっていた。 帯の高さ ＝ 上下の余白 × 2 ＋ コントロールの高さ * `--elsa-pane-window-band-control-height` … 行に並ぶものの高さ。PCは共通の 操作面（28px）。**狭い画面は検索欄が指で押す高さへ戻る**ので （2026-09-05・Issue #3050）、そちらへ追従する（`elsa_app_explorer.css`の `@media (max-width: 767px)`が同じ名前へ書き換える） * `--elsa-pane-window-band-height` … 上の式そのもの。**ボタンがある画面も、 検索しか無い画面も、「?」しか無い画面も、この1つの値で同じ高さになる。** **中身は縦の中央に置く**（`align-items: center`）。高さだけ揃えても、上寄せの 器が混ざれば行ごとに文字の高さがずれる。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ --elsa-pane-window-band-control-height: var(--elsa-block-action-height, 28px); --elsa-pane-window-band-height: calc((var(--elsa-pane-window-band-padding-block) * 2) + var(--elsa-pane-window-band-control-height)); display: grid; /* 左の列の幅は**据え置きTREEの標準の変数**（`--elsa-tree-pane-width`、#2345）で 受ける。境界の取っ手がこの変数だけを動かす。真ん中の`auto`が取っ手の1列である。 画面ごとの既定はその画面のCSSが`--elsa-tree-pane-width`へ書く。 */ grid-template-columns: var(--elsa-tree-pane-width, 320px) auto minmax(0, 1fr); /* 帯は上から**1段目=パンくず、2段目=道具**（2026-08-29の利用者指示）。どちらも 無い画面では、その行が高さ0になるだけで骨格は変わらない。 */ grid-template-areas: "band band band" "tools tools tools" "tree split main"; box-sizing: border-box; width: 100%; min-width: 0; /* **`clip`であって`hidden`ではない。** 角丸の外へ中身をはみ出させない目的は 同じだが、`hidden`はスクロールの器を作るため、中の`position: sticky`（左の 階層を画面に貼り付ける）が黙って効かなくなる。`clip`は器を作らずに切るので、 貼り付けたまま角も丸いままにできる。 */ overflow: clip; border: 1px solid var(--elsa-pane-window-border); border-radius: var(--elsa-pane-window-radius); /* 窓の面は右ペインの背景色（--elsa-surface）である。 */ background: var(--elsa-surface, #ffffff); } /*━━━ 窓のマス ━━━*/ .elsaPaneWindow > .elsaPaneWindowBand { grid-area: band; } /* 道具の帯は2段目（パンくずと同じマスに重ねない）。 */ .elsaPaneWindow > .elsaPaneWindowTools { grid-area: tools; } .elsaPaneWindow > .elsaPaneWindowPane { grid-area: tree; } .elsaPaneWindow > .elsaPaneWindowPane--main { grid-area: main; } .elsaPaneWindow > .elsaPaneSplitter { grid-area: split; } /* 帯。**内側の区切りは細い線1本だけ**で、外枠と二重にしない （CHATが会話欄と入力欄を`border-top`1本で分けているのと同じ作法）。 */ .elsaPaneWindow > .elsaPaneWindowBand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; box-sizing: border-box; /* 隙間・内側余白・高さは窓のトークンだけが決める（値をここへ書かない。2026-09-06）。 */ gap: var(--elsa-pane-window-band-gap); margin: 0; min-height: var(--elsa-pane-window-band-height); padding: var(--elsa-pane-window-band-padding-block) var(--elsa-pane-window-band-padding-inline); border-bottom: 1px solid var(--elsa-pane-window-border); background: var(--elsa-pane-window-band); } .elsaPaneWindow > .elsaPaneWindowPane { box-sizing: border-box; min-width: 0; /* **絶対配置の子をペインの中に閉じる**（2026-08-31にdevelopmentの実画面で実測）。 `position: absolute`の要素は、位置の基準になる祖先が1つも無いと**ページ全体**を 基準にする。ふだんは見えない要素（読み上げ専用のラベル`.elsaVisuallyHidden`、 共通LISTの検索の器、SWITCHの隠しラジオ）ばかりなので、誰も気づかない。 **統合窓では気づく。** 窓は画面の高さちょうどで立ち、送るのはペインの内側だけ、 というのが決めごとである。ペインの中身が画面より下まで伸びると、これらの要素 だけがペインの外——ページの座標——に居座り、**ページ全体が縦に動くようになる。** 帯も現在地も画面外へ出るので、統合窓の前提が崩れる。 実測: Amazonの注文詳細（1280×800）でページが1936px動いた。この1行で0pxになり、 ペインの内側の送り（2856px分）はそのまま生きている。 **個々の要素を1つずつ直さない。** 同じ原因の逃げ出しを、2026-08-31に3種類 （隠しラジオ・読み上げラベル・検索の器）続けて踏んだ。**基準をペインへ置けば、 中に何が入っても外へ出られない。** `position: relative`は`z-index: auto`のままなので、新しい重なりの文脈は作らない。 検索枠を帯へ透かす画面ではこのペインが`display: contents`になり、そのときは **この指定は効かない**（箱が無いので基準にもならない）。透かした先の箱 （`.elsaListScroll`）が自分で送るのは従来どおりである。 */ position: relative; /* **左ペインの内側の余白は外観設定の項目である**（2026-09-02の利用者決定。 Issue #2689 段階3）。既定は今までの10pxそのままである。 */ padding: var(--elsa-tree-pane-padding, 10px); } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **左ペイン（TREEエリア）は自分の地と字と大きさを持つ**（Issue #2689 段階3） 利用者が「TREEエリアの背景色・文字色・文字サイズ」を項目として指定した。 **既定値は今の値そのまま**（地は窓の面、字は地の文、大きさはフォーム文字 サイズ）なので、設定を変えないかぎり見た目は動かない。 木そのもの（`.elsaTree*`）ではなくペインへ載せる。木は右ペインの中にも 置けるので、**「左のエリア」という場所の設定は場所の側が持つ。** ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ .elsaPaneWindow > .elsaPaneWindowPane:not(.elsaPaneWindowPane--main) { background: var(--elsa-tree-background-color, #ffffff); color: var(--elsa-content-text-color, #333333); font-size: var(--elsa-tree-font-size, 16px); } /* **左右の境目の線は取っ手が兼ねる。** ペインに枠線を持たせると、幅を変える 取っ手（`.elsaPaneSplitter`）が持つ線と並んで二重に見える（2026-08-29の 利用者指摘）。掴める場所と見える線を同じ1本にしておく。 */ /*━━━ 中の部品を窓の面へ溶かす（窓の中だけ） ━━━*/ /* 据え置きのTREEは自前の枠と角丸を持つ。窓の中では落として左の面へ溶かす。 **据え置き（`--inline`）だけを溶かす。** ドロップダウン（`.elsaTreePanel`に `--inline`が付かない、FIELDのTREE型が開く一覧）まで溶かすと、窓の中の フィールド（例：文書保存の編集画面のフォルダ欄）で展開した候補一覧の 背景が透明になり、下の欄の文字が透けて見えてしまう（Issue #3793）。 展開部分はSUGGESTの候補一覧（`.elsaSelectorSuggestList`）と同じく、窓の 中でも自前の背景・枠・影を保つ。 */ .elsaPaneWindow .elsaTreePanel--inline { border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* ラベルタブ（`caption`）も面へ溶かす。**文字は残す**（何を選ぶ欄なのかは 画面から消さない）。読み上げの名前はTREE自身の`aria-label`が持っているので、 見た目だけを地の文へ戻す。 */ .elsaPaneWindow > .elsaPaneWindowPane > .block.elsaFieldRow > .left p { min-height: 0; padding: 0 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--elsa-text-muted, #667085); font-size: .9em; } /* **行の器（`.block.elsaFieldRow`）そのものには触らない。** ブロックのルートを外の 祖先セレクタから装飾しないのが共通の規則である（`tests/field_block_style_test.php`）。 タブとの継ぎ目の角丸は、上のツリーの`border-radius: 0`が既に消している。 */ /*━━━ スマホ幅（375px想定） ━━━*/ @media (max-width: 767px) { /* **縦に積んでも1枚の窓のまま**にする。枠が分解して部品ごとの箱へ戻ると、 狭い画面だけ元の「バラバラ」に見える。1列に積む表示では取っ手を出さない （共通CSSが隠す）ので、取っ手のマスも持たせない。 */ .elsaPaneWindow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "band" "tools" "tree" "main"; } /* **ここでは取っ手が消える**ので、左右の区切りの線を左のペインが自分で持つ （広い画面では取っ手が兼ねるため持たせない）。 */ .elsaPaneWindow > .elsaPaneWindowPane:not(.elsaPaneWindowPane--main) { border-bottom: 1px solid var(--elsa-pane-window-border); } } /*━━━ 1段目=パンくず・2段目=道具の帯 ━━━*/ /* 2026-08-29の利用者指示:「ここはTree全てでパンくずを表示するよう統一が必要です。 物件数や区画数、削除済を表示ボタンはパンくずエリアの下に配置してください」。 窓の帯は**上から順に「いま居る場所」「道具」**と決める。文書保存が先にこの形に なっており、それを2ペインの窓を持つ全画面の標準にした。どちらも`.elsaPaneWindowBand` （面と区切り線）の上に、それぞれの並べ方だけを足す。 */ .elsaPaneWindow > .elsaPaneWindowTrail { gap: 4px; justify-content: flex-start; /* **帯の高さは変えずに、行の中身を少し背伸びさせる**（2026-08-31の利用者指示）。 2026-09-02、ロゴとアプリ名はパンくず文字を基準に1.2emへ統一した（下記）。 パディングを詰めて合計（帯の実測高さ）を保ち、既存の帯の中央線へ揃える。 */ padding-top: 3px; padding-bottom: 3px; /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **パンくずは自分の地と字を持つ**（2026-09-02の利用者決定。Issue #2689 段階3） それまでは道具の帯と同じ面を借り、字は地の文をそのまま継いでいた。 利用者が「パンくずエリアの背景色・文字色」を項目として指定したので、 エリアの側で受ける。**既定値は今の値そのまま**（面は帯と同じ`#f5f7f9`、 字は地の文`#333333`）なので、設定を変えないかぎり見た目は動かない。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ background: var(--elsa-breadcrumb-background-color, #f5f7f9); color: var(--elsa-breadcrumb-text-color, #333333); } /* **縦の中心を1本に揃える**（2026-08-31の利用者指摘。「ロゴ・＞・文字の上下位置が ばらばら」）。 1行に収まっているかぎり、この帯の`align-items: center`（`.elsaPaneWindowBand`が 持つ）だけで全部の子が同じ中心に揃う——実測でも揃っていた。**崩れるのは 折り返したとき**である。共有元の`.elsaPaneWindowBand`は`flex-wrap: wrap` （帯全般の既定。件数などが並ぶ道具の帯はそれで正しい）を持つため、パンくずが 1行に収まらない広さ（767pxより広いがロゴ・矢印を大きくした今回の変更で 以前より詰まりやすくなった）だと、はみ出した段だけ2行目へ落ち、**2行目は 1行目と別の中心を持つ。** 揃っている段とずれた段が混じって見えるのは、 各要素の高さが違うからではなく、行が割れているからだった。 **折り返させない。** 広い画面（768px以上）ではこの帯だけ`nowrap`にする。 入りきらない分は`.elsaPaneWindow`自身の`overflow: clip`（角丸の外を切る、 という既存の役目）がそのまま受け止めるので、スクロール枠を新設しない。 狭い画面（767px以下）は従来どおり——「…」を押して全階層を開いたときは 複数行に折り返る作りのままにする（スマホでは1行に収める幅がそもそも無い）。 */ @media (min-width: 768px) { .elsaPaneWindow > .elsaPaneWindowTrail { flex-wrap: nowrap; overflow-x: hidden; } } /* 各階層は押せる。**押しても画面は遷移しない**（ツリーの選択が動く）。 名前は折り返さず…で省略し、全文は`title`で読む（ツリーの行と同じ作法）。 */ .elsaPaneWindowTrailStep { display: inline-flex; align-items: center; min-height: 2em; max-width: 16em; overflow: hidden; padding: 0 .35em; border: 0; border-radius: var(--elsa-field-control-border-radius, 4px); background: transparent; color: inherit; font-family: inherit; font-size: var(--elsa-breadcrumb-font-size, 32px); /* 帯のパディングを詰めた分（上記）を、行の高さへ回す。ロゴの高さと揃える。 */ line-height: 2; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } /* いま居る階層は行き先ではない。押せない見た目にして、押しても何も起きない。 */ .elsaPaneWindowTrailStep[aria-current="page"] { font-weight: 700; cursor: default; /* 現在地を先に縮めて文字の途中で切らない。長い名前は共通の省略表示にする。 */ flex-shrink: 0; display: block; text-overflow: ellipsis; } /* 起点のロゴ（2026-08-30の利用者確定補足）。スマホ用ロゴが外観設定に登録されて いれば、道筋の先頭は文字ではなくこの画像になる。 ロゴはパンくず文字を基準に外観設定の比率で描く（Issue #3418、既定120%）。 横は元の比のまま伸ばす（`width: auto`）。細長いロゴでも段が広がらないよう 横にも上限を置き、はみ出す分は`contain`で縮める。ロゴが無い会社では要素 そのものが出ないので、枠だけが残ることはない。 **ぼやけの心配はしなくてよい。** 表示を縮小しても、外観設定へ 上げる画像は通常この何倍もの解像度を持つ（実測で確認した会社ロゴは 1571×248px）。ここで起きるのは常に縮小表示であり、`object-fit: contain`は 拡大（引き伸ばし）を行わない。 */ .elsaPaneWindowTrailLogo { display: block; width: auto; max-width: calc(10em * var(--elsa-header-logo-scale, 1.2) / 1.2); height: calc(1em * var(--elsa-header-logo-scale, 1.2)); object-fit: contain; } /* 控えの文字（`elsaPaneWindowTrailRootText`）は画像と一緒にマークアップへ 載っているが、768px以上では隠す（画像を出す）。**読み上げの名前は段本体の `aria-label`が持つ**ので、この文字は`aria-hidden`のまま——2本の名前を 読み上げに出さない。 */ .elsaPaneWindowTrailRootText { display: none; font-size: calc(1em * var(--elsa-header-logo-scale, 1.2)); font-weight: 700; } @media (hover: hover) { .elsaPaneWindowTrailStep:not([aria-current="page"]):hover { background: var(--elsa-hover-bg, #eaf4ff); } } .elsaPaneWindowTrailStep:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: -1px; } /* 階層と階層のあいだの矢印。**文字の`>`ではなく共通アイコン** （`--elsa-icon-arrow-right`）をmaskで敷く（2026-08-29の利用者指示）。 大きさは`em`なので、表示設定の文字サイズへ一緒に追従する。 2026-08-31、ロゴと同じ利用者指摘（「地味で見えにくい」）を受けて`.55em`から `.75em`へ引き上げた。帯の実測高さを決めているのは文字の段（`line-height: 1.75`） なので、矢印がそれより小さいかぎり帯は太らない——`.75em`（新しい行の高さの 半分未満）でも余裕がある。左右の余白（`gap`）も詰まって見えないよう `2px`から`4px`へ広げた。 */ .elsaPaneWindowTrailSeparator { flex: 0 0 auto; align-self: center; width: .75em; height: .75em; background: var(--elsa-text-muted, #667085); -webkit-mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; } /* **狭い画面では末端寄りを残す。** 畳んだ分は「…」で示し、押すと全部出る （隠したままだと、狭い画面からだけ上の階層へ戻れなくなる）。 */ .elsaPaneWindowTrailEllipsis { flex: 0 0 auto; padding: 0 .35em; border: 0; border-radius: var(--elsa-field-control-border-radius, 4px); background: transparent; color: var(--elsa-text-muted, #667085); font: inherit; cursor: pointer; } /* **広い画面では畳まない。** 幅が足りているのに省略すると、道筋を読むために 一手増える。畳むのは1列に積む幅（取っ手が消えるのと同じ境目）だけである。 */ .elsaPaneWindowTrailEllipsis { display: none; } @media (max-width: 767px) { .elsaPaneWindowTrail:not([data-pane-window-trail-expanded="true"]) .elsaPaneWindowTrailEllipsis { display: inline-block; } .elsaPaneWindowTrail:not([data-pane-window-trail-expanded="true"]) [data-trail-collapsed="true"] { display: none; } .elsaPaneWindowTrailStep { max-width: 10em; } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ 375px幅は旧画面の「文字のパンくず」と同じ見た目にする（2026-08-31の 利用者指示）。木の経路・押して選ぶ仕組み（`elsa_pane_window_trail.js`）は 1文字も変えない。変えるのは**文字サイズ・色・リンク下線・＞の形**だけで、 手本は`core/css/base.css`の`.elsaBreadcrumb`（旧い青いメニューの画面が 今も使っている、統合していない画面の見出しパンくず）である。 **四角いボタンの見た目（帯色・角丸・ホバー面）は落とす。** 旧画面のパンくずは 地の文で、押せる行だけがリンクの色を持つ。文字サイズは `--elsa-breadcrumb-font-size`（既定32px）を**そのまま読む**——会社ごとに 外観設定で変えている値を、統合窓だけ違う既定にしない。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ .elsaPaneWindowTrailStep { padding: 0; border-radius: 0; background: transparent !important; font-size: var(--elsa-breadcrumb-font-size, 32px); /* デスクトップの`line-height: 2`は14px前後の文字を前提にロゴと高さを 揃えたもので、最大32pxまで動くこの文字サイズにはそのまま使えない （2倍になると行が過大に太る）。旧い`.elsaBreadcrumb`も特に指定を 持たないので、ブラウザの既定へ戻す。 */ line-height: normal; font-weight: 400; /* **狭い画面の手前の段は補助文字である。** パンくずの文字色そのもの ではなく、旧画面と同じ「押せる段は控えめ、いま居る場所だけ地の文」の 段差を保つ（下の[aria-current="page"]がパンくずの文字色を受ける）。 */ color: var(--elsa-text-muted, #667085); } /* いま居る場所（末尾）は旧いページ見出し（`.elsaPageTitle`）と同じ、地の文の色。 */ .elsaPaneWindowTrailStep[aria-current="page"] { color: var(--elsa-breadcrumb-text-color, #333333); } /* **根（起点）だけ、旧い「トップ」と同じ既定のリンクの見た目にする。** 中間の階層（旧画面の「販売管理」に相当）は押せてもリンクの色を持たない ——旧画面も「トップ」1つだけがリンクで、中間はただの地の文だった。 `:not(.elsaPaneWindowTrailStep ~ .elsaPaneWindowTrailStep)`は「同じ印を 持つ手前の兄弟が無い」段、すなわち最初の段を指す。畳みの「…」ボタンは 別の印（`elsaPaneWindowTrailEllipsis`）なので数えない——`