/* 土台：デザイントークン（:root）・リセット・本文・器のレイアウト */ /* ============================================================ Design Tokens ============================================================ */ :root { /* Colors */ --color-primary: #4b7cf3; --color-primary-hover: #3d6ee0; --color-primary-light: rgba(75, 124, 243, 0.12); --color-primary-border: rgba(75, 124, 243, 0.35); --color-sidebar: #141d2b; --color-sidebar-hover: rgba(255, 255, 255, 0.06); --color-sidebar-active: rgba(75, 124, 243, 0.22); --color-bg: #f4f6fb; --color-surface: #ffffff; --color-border: #e4e7ed; /* 面と面の境（#ddd/#eee/#f0f0f0/#dde3ed を吸収） */ --color-border-strong: #cbd2dd; /* 見えるべき枠＝入力欄・区切り（#ccc/#cbd5e1 を吸収） */ /* **濃紺の地はFXのローソク足チャート専用の例外**（市場チャートの慣習）。 README にも明記してある意図的な例外なので、名前を与えて他と混ざらないようにする。 */ --color-chart-dark: #131722; /* チャートの地 */ --color-chart-dark-2: #1e2235; /* その上の面 */ --color-chart-dark-line: #2a2d3a; /* その上の枠・格子 */ /* **無彩色も尺度が無かった。** 実測で灰色は **72種・463箇所**あり、文字は #555/#666/#888（→muted相当）と #999/#aaa/#bbb/#a0a8b8（→subtle相当）が、 枠は #ccc/#ddd/#eee/#f0f0f0/#dde3ed が、面は #fff/#fafafa/#eef1f6/#eef3ff が それぞれ役割は同じなのに別々の値で書かれていた。役割ごとに1つへ寄せる。 */ --color-text: #1a202c; --color-text-muted: #6b7280; --color-text-subtle: #9ca3af; --color-text-on-accent: #ffffff; /* 色や濃紺の上に置く文字（実測118箇所の #fff） */ /* 意味の色は「塗り」「文字」「暗い地の上」の3つで1組。**同じ意味に色を増やさない。** 実測（18タブを描画して計算後の色を数えた）では、プラスの緑が8種・マイナスの赤系が 12種あり、**1つのタブの中に4〜5種が同居**していた（投資信託の緑4種、ホームの赤系5種）。 原因は旧い組（#27ae60 / #e74c3c）がトークンと並存していたこと。 **文字と塗りを分けるのは、塗り用の明るさのまま白地に文字を置くと読めないから** （#10b981 は白地でコントラスト約3.0＝本文に足りない）。文字用は AA を満たす濃さにする。 */ --color-danger: #ef4444; /* 塗り・バー・点・チャートの線 */ --color-success: #10b981; --color-warning: #f59e0b; /* **塗り用の明るさのまま文字にしない。** #10b981 は白地でコントラスト約2.5、#ef4444 で 約3.4＝どちらも本文（4.5）に足りず、19px の KPI（大文字扱いの3.0）でも緑は届かない。 文字用は AA を満たす濃さにし、塗り・バー・点・チャートの線は明るいほうを使う。 */ --color-danger-text: #d92d20; /* 白地に置く文字（金額の増減など） */ --color-success-text: #047857; --color-warning-text: #b45309; --color-danger-on-dark: #ff8a8a; /* 濃紺の上（FXのローソク足チャート） */ --color-success-on-dark: #5ee9b5; --color-danger-light: rgba(239, 68, 68, 0.10); --color-success-light: rgba(16, 185, 129, 0.14); /* 表。**一番濃いものはデータであって見出しではない**＝以前は見出しが濃紺のベタ塗り （#374151）で、目に最初に入るのがラベルだった。ただし帯を外して終わりにすると、 表だけが「文字の格子」になって、周りのヒーロー・インラインバー・ピル・ヒートマップと 語彙が合わない（引き算は上品ではなく素っ気ない）。 **表そのものを1枚の作り込まれた面にする**＝見出しと合計を「濃紺をごく薄く溶いた面」に し、上下で向きを反転させて鏡にする。表は上下を閉じた1つのものになり、間の行は白い。 濃紺は面として塗らず、混ぜ物（--color-ink）としてだけ使う。 */ /* **面の明度は3段で、地を真ん中に置く。** 見出し（#e7eef9・地より濃い） ＜ 地（#f4f6fb） ＜ 本体（#ffffff・地より淡い） ここを外すと、地とほぼ同じ明度の面ができて**器の縁が地に溶ける**。実際に `--color-th-field: #f2f6fd` を置いたときがそれで、白いカードの中にある表 （純資産・投信など）では成立していたのに、**カードの縁がすぐ上に来る表** （支出・収入＝上に見出しもカードも無く、器がページの地に直接載る）だけ 見出しと地が繋がって、どこからがカードなのか分からなくなった。 **見出しは白との差だけでなく、地との差でも決める。** */ --color-ink: #232e42; /* アプリの濃紺（サイドバー/ヒーロー由来）。混ぜ物専用 */ --color-th-field: #d6e1f2; /* 見出しの面（本体から遠い側）＝地よりはっきり濃い */ --color-th-field-2: #f3f7fc; /* 見出しの面（本体に接する側）＝白へ抜ける */ --color-th-edge: #b9c8e0; /* 見出しと本体の境の線 */ --color-th-fg: #47516a; /* 見出しの文字（面が濃くなったぶん少し締める） */ --color-th-tint-2: #cbd9ef; /* もう一段濃い面（固定列の角・入力列の見出し・打つグリッド） */ --color-row-line: #eef1f6; /* 行と行の間。--color-border より淡い */ --color-row-rail: var(--color-primary); /* ホバー中の行の左端 */ --color-row-hover: #eff4ff; /* ホバー中の行の面。見出しの面と同じ青の系統 */ /* Shadows */ /* **影は「高さ」の尺度で、色は1つ。** 以前は 40箇所に **35種**＝ほぼ全部が使い捨てで、 しかも影の色が5種（黒・rgba(20,30,60)・rgba(15,23,42)・青2種）混ざっていた。 色は**地に合わせた濃紺**に統一する＝純黒はこの寒色の地の上では汚れて見える。 青い影だけは「高さ」ではなく**強調**（主ボタン）なので別に持つ。 */ --shadow-xs: 0 1px 2px rgba(20, 30, 60, 0.06); /* 接地 */ --shadow-sm: 0 1px 3px rgba(20, 30, 60, 0.10), 0 1px 2px rgba(20, 30, 60, 0.06); /* カード */ --shadow-md: 0 4px 12px -2px rgba(20, 30, 60, 0.12), 0 2px 4px rgba(20, 30, 60, 0.06); /* 浮いた面 */ --shadow-lg: 0 12px 32px -8px rgba(20, 30, 60, 0.20), 0 4px 8px -4px rgba(20, 30, 60, 0.10); /* ドロップダウン */ --shadow-xl: 0 24px 64px -12px rgba(20, 30, 60, 0.28), 0 8px 16px -8px rgba(20, 30, 60, 0.12); /* モーダル */ --shadow-primary: 0 2px 8px rgba(75, 124, 243, 0.30); /* 主ボタンの強調（高さではない） */ /* Border radius */ /* **角丸も尺度が現実を写していなかった。** 3段（6/10/14）＋pill を定義していたのに、 実際は **28種**（直書き290箇所）で、**一番多い 4px（67箇所）が尺度に無かった**。 2px（17）・3px（23）・8px（24）・12px（15）も同様。下は既存の3段に、支配的だった 2px と 4px を足して起こした5段＝大半の要素は動かないまま28種が7つに畳まれる。 */ --radius-xs: 2px; /* ヒートマップのセル・極小のバー（1,2,3） */ --radius-sm: 4px; /* チップ・小さな入力（4,5） */ --radius-md: 6px; /* ボタン・入力欄（6,7,8,9） */ --radius-lg: 10px; /* カード・表の器（10,11,12） */ --radius-xl: 14px; /* 大きな面・モーダル（13〜24） */ --radius-pill: 999px; /* ピル */ --radius-circle: 50%; /* 丸 */ /* Spacing (4px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* 読みやすい幅（measure）— タブ全体の上限。**全タブ共通で例外を作らない** （Layout 参照）。器の幅が画面ごとに変わると、タブを行き来したときに 中身ではなく枠のほうが動いて見える。 */ --w-shell: 1520px; /* Typography */ --font: 'Noto Sans JP', "Helvetica Neue", Arial, sans-serif; /* **太さは4段。** 以前は 400/500/600/650/700/750/800 の7種を書いていたが、 読み込んでいたのが `wght@300;400;500;700` の4ウェイトだけだったので、 **600・650・700・750・800 は全部 700 に丸められて同じ字面で描かれていた** （40px の同一文字列で実測して幅が 483.59px で一致。CSS のフォント照合は 500 超の 指定に対して上方向を先に探すため）。つまり「見出しは 600、強調は 700」という 書き分けは、書かれてはいたが画面には出ていなかった。 可変フォント（`wght@400..800` の1本）に替えて、4段が実際に別物として出るようにする。 */ --fw-normal: 400; /* 本文 */ --fw-medium: 500; /* ラベル・行頭の見出し語 */ --fw-semibold: 600; /* 表の見出し・小見出し */ --fw-bold: 700; /* 主役の数字・合計 */ /* **大きさの尺度は実際の使われ方から起こす。** 以前は 11/12/14/15/16/20/24 の7段を 定義していたのに、画面が実際に使っていたのは **27種**（直書き656箇所）で、 **一番多い 13px（182箇所）と 10px（64箇所）が尺度に無かった**＝だから直書きされた。 12.5 / 13.5 / 11.5 / 14.5 のような半端な値（計25箇所）も「段の間が欲しい」の現れ。 下の10段は、その分布をそのまま段にしたもの。 */ --text-3xs: 10px; /* バッジ・極小の注記（9,10 を吸収） */ --text-2xs: 11px; /* 補足ラベル（11,11.5） */ --text-xs: 12px; /* 副次ラベル（12,12.5） */ --text-sm: 13px; /* **表の本文＝最頻**（13,13.5） */ --text-base: 14px; /* 文章（14,14.5） */ --text-md: 16px; /* 小見出し（15,16,17） */ --text-lg: 20px; /* 見出し（18,19,20） */ --text-xl: 24px; /* KPIの数字（22,23,24,26） */ --text-2xl: 32px; /* ヒーローの数字（30,32,34） */ --text-3xl: 38px; /* 一番大きい数字（38,40） */ } /* ============================================================ Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ Base ============================================================ */ /* 縦スクロールバーのぶんを**常に**空けておく。中身が長いタブ（支出・未確認）と短いタブ （目標・祝日）とで、バーが出たり消えたりして本文の幅が 15px 変わる。`#main-content` は 左右中央に置くので、幅が変わると**カードの左右が両方動く**＝タブを切り替えるたびに セクションごと横へずれて見える（中央寄せにする前は右端だけがずれていたので目立たなかった）。 バーを常時表示する `overflow-y: scroll` と違い、**必要になるまで軌道を描かない**ので、 オーバーレイのスクロールバー（macOS の既定）では見た目が変わらない。 */ html { scrollbar-gutter: stable; } body { font-family: var(--font); font-size: var(--text-base); line-height: 1.6; background: var(--color-bg); color: var(--color-text); /* ページ全体を横に振れなくする。**中身がはみ出しているわけではない**（狭い画面での実測は どの状態でも 0px）が、指で払うとブラウザの弾性スクロールで少し横へ動いてしまう。 広い表や図はそれぞれの枠（`.ug-wrap` 等）が自前で横スクロールするので、ページ自身が 横に動く必要は一度も無い。`overflow-x: hidden` にしないのは sticky が効かなくなる ブラウザがあるため＝**弾みだけを止める**。 */ overscroll-behavior-x: none; -webkit-font-smoothing: antialiased; } /* ============================================================ Layout ============================================================ */ #layout { display: flex; min-height: 100vh; } #main-content { flex: 1; min-width: 0; padding: var(--sp-5); /* 列が3つしかない表も `table { width:100% }` で器いっぱいに伸びるので、広いモニタでは 見出しと数字が視線の届かない距離まで離れてしまう。上限を置き、余った幅は左右へ均等に 逃がす（flex アイテムの auto マージンが余った幅を吸う）。 **タブごとの例外は作らない**＝各表の width:max-content を測ると、支出は表示列を全部 ONにしても 1072px、未確認 1238px、在庫の棚卸入力 1261px、カード請求の月次 1329px と、 どれもこの上限に収まる。列を増やす変更をしたら測り直すこと。溢れても `.table-wrapper` の overflow-x が受けるので壊れはしない。 1440 ではなく 1520 なのは、**マスタ管理でグループを器にして入れ子が1段増えた**ため ＝1440 だと中身が使える幅が 1329px になり、一番広い表と同数で余裕がゼロになる。 */ max-width: var(--w-shell); margin-inline: auto; }