/* 「企業を探す」（/search/）だけのスタイル。**この画面は agent_b の持ち場。** * * ⚠ **`app.css` のトークンだけを使う。** 新しい色を作らない * （--surface-1 / --text-* / --border / --gridline / --series-* / --step-1..4 / --glass*）。 * ⚠ **生の `font-size: NNpx` を書かない。** `--fs-xs`（11.5px・下限）〜 `--fs-h1` の * 段だけを使う。前はこのファイルだけで 10.5px を10箇所以上使っていて、 * 画面全体の font-size が 20 種に膨らんでいた（＝「読みづらい」の一因）。 * ⚠ **クラスは全部 `fd-` で始める。** `app.css` にも `.srch` `.fgroup` `.fchk` * という似た名前の一式があり、そちらは共有物なので触れない。名前空間を分けて * 勝ち負けを起こさないようにしている。 * * この画面は SUUMO 型 —— 左が固定の条件パネル、右が純粋な表。 * * ### 2026-09-21 の作り直しで何が崩れていたか（同じ穴に落ちないための記録） * * 1. **表が面に載っていなかった。** `.fd-tablewrap` に背景が無く、`thead` だけが * `--surface-1` の不透明な帯だった。つまり**帯だけが宙に浮いて**、行は * 素の背景（`.aurora`）の上に直接置かれていた。他のページの表は全部 * `.tablecard.glass` に載っているので、この画面だけ「当たっていない」ように見えた。 * → 共有部品 `.tablecard.glass` をそのまま使う（下の `.fd-result`）。 * 2. **`main.wrap` をこの画面だけ 1280px にしていた。** `.wrap` は `margin: 0 auto` * なので、幅を変えると**左端の位置まで動く**。`/product/`（1140px）から来ると * パンくずと h1 が横に飛んだ。→ 外枠は 1140px のまま、**表のグリッドだけ**を * 左右にはみ出させる（`--fd-bleed`）。 * 3. **h1 が 26px だった**（他のページは `.page-head h1`）。この画面だけ小さく、 * 作りかけに見えた。→ テンプレートで `.page-head` / `.lede` を使う。 * 4. **行の上下余白が 4px だった。** 共有の `.tablecard` は 10px 16px。 * 「コンパクト」を通り越して**窮屈**になっていた（本人の指摘どおり）。 * 5. **行の区切りが見えなかった。** `--border`（黒の 10% 透過）は面の上では * ほぼ消える。→ 罫線用のトークン `--gridline` に替える。 * 6. **ボタンが3種類バラバラだった**（`.fd-reset` / `.fd-csv` / `.fd-more` で * 大きさ・角丸・色が全部違う）。→ `.fd-btn` 1本にまとめた。 */ /* ---------------------------------------------------------------- 全体 */ /* ⚠ **`main.wrap` の max-width を触らない。** ここを広げると左端の位置がずれて、 パンくず・h1 が他のページと食い違う（上の 2.）。6列の表に幅が要るだけなので、 **グリッドだけ**を本文の外へ左右対称にはみ出させる。 `--fd-bleed` は片側にはみ出す量: - 本文の外に余っている幅 `(100vw - var(--page-max)) / 2` までしか借りない （借りすぎるとビューポートの端に貼り付く） - 上限 74px。本文 1092px + 148px = 1240px で、これ以上広げても表は薄くなるだけ - ビューポートが `--page-max` 未満なら 0（`clamp` の下限）—— 借りる余地が無い ⚠ **`padding` で相殺しない。** 中身（パネルと表）ごと動かしたいので margin で出す。 ⚠ **`body` の左右 padding を勘定に入れていなかった。** 以前は `body` に `padding: 0 20px` があったので、実際に余っている幅は `(100vw - 40px - 1140px) / 2` で、この式は**常に 20px 多く見積もっていた** （`.wrap` の 24px に食われて横あふれにはならないが、上に書いた安全余裕は 成立していなかった）。いま `body` の padding は無く、余白は中身側が持つので この式がそのまま正しい（`static/app.css` の `body` の注記と対）。 ⚠ **幅の数はトークン（`--page-max`）から引く。** ここと `.wrap` と `.foot-in` の 3箇所に写すと、広げた日にこの表だけがずれる。 */ .fd { --fd-bleed: clamp(0px, calc((100vw - var(--page-max)) / 2), 74px); /* ⚠⚠ **はみ出すのは右だけ（2026-10-10、指摘「このパネルがスクロールしづらい」）。** 以前は左右に同じだけ出していたので、**条件パネルがビューポートの端に寄り**、 自前のスクロール（`.fd-panel` の `overflow-y: auto`）を掴む余地が無かった。 ⚠ **余白の数字を足して直さない。** 幅を借りているのは**表**のためで、 左の柱は借りる理由が無い。借りる側だけ残すのが正しい形 （`--fd-bleed` の値は変えていない —— 表の幅は 1 px も減らない）。 ⚠ 左は `.wrap` の `--gutter` がそのまま効く。**ここに padding を足さない。** */ margin: 0 calc(var(--fd-bleed) * -1) 0 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gap-5); align-items: start; } /* ⚠ **グリッドの子に `min-width: 0` を明示する。** 既定の `min-width: auto` だと 子の min-content（下で表に `min-width: 560px` を入れてある）がトラックを押し広げ、 390px で**条件パネルごと画面の外に出た**。トラック側を `minmax(0, 1fr)` に しただけでは足りない —— 実測でトラックが 562px のまま残った。 */ .fd > * { min-width: 0; } /* ⚠ **条件パネルの中の `p` に `max-width: 72ch` を効かせない。** app.css の 素の `p` に付いていて、300px の柱では効かないが、将来広げたときに効きはじめる。 */ .fd p { max-width: none; } /* ------------------------------------------------------------ 条件パネル */ /* ⚠ **`top` はヘッダーの高さぶんだけ下げる。** `.topbar` も sticky なので、 0 にすると条件パネルの1行目がヘッダーの裏に潜る（既に踏んだ事故）。 ⚠ **`--bar-h`（58px）をそのまま使わない。** あれは設計値で、実物と合っている 保証がない（2026-10-10 まで、狭い画面でバーが2段に折れて 113〜137px あった。 いまは検索窓をアイコンに畳んでどの幅でも1段）。`static/app.js` の `trackTopbar()` が実測を `--fd-top` に写すので、そちらを優先する （JS が落ちたら設計値に戻る）。 パネル自体が縦に長いので、**中でスクロールさせて**画面からはみ出させない。 ⚠⚠ **`+ 12px` にしない（2026-10-08）。** 右の `thead` は `--fd-top` ちょうどに 貼り付く（隙間を空けると行がそこに覗くので、あちらは詰める以外にない）。 ここだけ 12px 下げていたため、**左の条件パネルの上端と右の見出し行の上端が 12px ずれて**、2段組の起点が揃っていなかった。**同じ値にする。** ⚠ **狭い画面（899px 以下）ではこの柱は popover のシートになる。** 形は下の 「シート」の節（`.fd-side[popover]`）にまとめてある。ここは wide の話だけ。 */ .fd-side { position: sticky; top: var(--fd-top, var(--bar-h)); } /* ⚠ **`--glass`（0.70）ではなく `--glass-strong`（0.88）。** 中に細い文字と チェックボックスが数百個並ぶので、密度が高いところほど透けさせない （app.css の `.tablecard` が同じ理由で 0.88 にしてある）。 透けたままだと見出しの帯（不透明な `--surface-1`）と地の色が食い違って、 **パネルの中で面が2色に割れて見えていた。** */ .fd-panel { background: var(--glass-strong); padding: 0 16px 18px; /* ⚠ 引く値は `top` のオフセット + 下の余白。`top` から `+12px` を外したので ここも 28px -> 16px（ずらすと画面の外へはみ出すか、無駄な空きが残る）。 */ max-height: calc(100vh - var(--fd-top, var(--bar-h)) - 16px); overflow-y: auto; overscroll-behavior: contain; } /* ⚠⚠ **この中の `?` の吹き出しは、この柱の幅に収める。** 上の `overflow-y: auto` のせいで、`overflow-x` も `visible` ではなくなる （CSS の規定: 片方を `visible` 以外にするともう片方は `auto` になる）。 つまり**柱より幅のある吹き出しは横で切られる** —— 既定の 360px は この柱（274px）を超えていた（実測で切れていた）。 ⚠ **`overflow-y` を外して解かない。** あれは「柱が画面に収まる」ためのもので、 外すと条件が長いときに表と高さが合わなくなる。 ⚠ 左端に寄せる。中央揃えのままだと、右端の `?` で吹き出しが右へ出る。 */ /* ⚠ この柱は `overflow-y: auto`（＝横も切る）ので、**横には出せない。** ここだけ下に出して、幅を柱に収める。 */ /* ⚠⚠ **2026-10-10 に、シートになっても値が合っているかを見直した（結論: このまま）。** 899px 以下でこの器は柱（274px）ではなく画面いっぱいのシートになるが、 **いちばん狭いのは 320px の画面**で、`.wrap` の中身が約 280px、 `.fd-panel` の左右 16px を引いて **248px**。244px はそこにぎりぎり収まる —— **広げると、いちばん狭い画面でだけ切れる**（切れても例外は出ない）。 ⚠⚠ **この `?` を popover にしない。** `parts/_hint.html` に 「popover に戻さない（top layer ＝画面中央に出て、どの `?` を押したのか 分からなくなる）」と書いてある。条件シート（`.fd-side`）が popover なのは **画面を覆ってよいもの**だからで、役割が違う。 */ .fd-panel .hint__pop { max-width: 244px; top: calc(100% + 7px); left: auto; right: 0; transform: none; } .fd-panel__h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); /* ⚠ 透けさせない。下を行が流れると見出しが読めなくなる。 */ background: var(--surface-1); margin: 0 -16px; padding: 13px 16px 11px; border-bottom: 1px solid var(--gridline); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); } /* 条件のひとかたまり。**区切りを効かせる**（`--border` では面の上で消えていた）。 */ .fd-group { padding: 16px 0; border-bottom: 1px solid var(--gridline); } .fd-group:last-of-type { border-bottom: 0; padding-bottom: 4px; } .fd-group__h { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); min-height: 24px; } .fd-group__t { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); } /* すべて / いずれか の行。**見出しとは別の行**に置く。 1行に詰めたら 300px ではどれも読めない幅になった。 */ .fd-group__sub { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); flex-wrap: wrap; margin: 6px 0 9px; } /* 「N 件選択中」＋「すべて外す」。**1件以上選んでいるときだけ出る** （`hidden` を外すのは `static/app.js` の `syncPicked()`）。 ⚠⚠ **「すべて選ぶ」と「指定なし」は 2026-10-09 に消した（指摘で決定が覆った）。** 「**『すべて選ぶ』ってボタン要る？**『指定なし』も何も選択されていないときには よくわからない。**選択したら、選択された奴が出てくる、『すべて外す』も 出てくる**が良い気もするけどどう思う？」 - OR が既定なので「すべて選ぶ」＝ほぼ絞らないのと同じ。押しても画面が 変わらないボタンは「効いていない」と読まれる。 - 「指定なし」は**一覧を見れば分かる**（触れば分かることを文で言わない）。 - 「すべて外す」だけ残す。138 件を1つずつ外すのは苦痛。 ⚠ **同じ日の午前に「残す」と決めた記録がこの近辺にあったが、覆っている。** `.fd-bulk--on` も `static/app.js` の `syncBulk()` ごと消した。 ⚠ **`display` を持つので `[hidden]` の打ち消しが要る**（`app.css` の `[hidden]` の節）。 */ .fd-group__picked { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); flex-wrap: wrap; margin: 6px 0 9px; } .fd-group__picked[hidden] { display: none; } .fd-state { font-size: var(--fs-xs); color: var(--link); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } /* いずれか / すべて。**既定は「いずれか」（OR）**（2026-10-09 に AND から替えた）。 1つの条件の中で複数選んだら OR、別の条件どうしは AND（自動）、何も選ばなければ 絞り込みなし＝全件。既定が AND だったころは「すべて選ぶ」を押すと 138 件が AND で 結ばれて**必ず0件**になっていた。 ⚠ **AND（すべて）は消していない。** 2〜3個の AND は営業リストとして効く。 替えたのは既定の座と**並び順**（既定が左）だけ。 ⚠ 意味の説明は下の `.fd-mode-note`。**押す前に読める位置**に置く。 */ .fd-mode { display: flex; gap: var(--gap-1); flex: none; margin-left: auto; } .fd-mode input { position: absolute; opacity: 0; pointer-events: none; } /* ⚠ **`