:root{ --parch:#e9dcbd; --parch2:#f4ead2; --card:#f7efdb; --card-edge:#c9b68c; --ink:#332516; --ink-soft:#6e5a41; /* --ink-faint はもと #9a8768（--card #f7efdb 上で3.03:1 / --parch #e9dcbd 上で2.56:1、 WCAG AA 4.5:1 未達）。同じ色相・彩度(H≈37° S≈20%)を保ったまま明度だけを 50.6%→35%まで下げ、両背景で4.5:1以上（card 5.52:1 / parch 4.65:1、実測値）を確保した。 この明度は --ink-soft(#6e5a41 相当 L≈34.3%)とほぼ同じになり、色だけでは ink-soft と ink-faint を見分けられない（詳細は docs/design_tokens.md）。 階層は --fs-sm 等の文字サイズ・使用箇所（th/補助テキスト）で保つ判断とした。 */ --ink-faint:#6b5e48; --wood:#191008; --wood2:#26180d; --gold:#e6c979; --gold-deep:#c79a2a; --red:#a5231b; --red-deep:#7d150f; --profit:#1e7d3c; --loss:#c0392b; --blue:#2f6db5; --warn:#c07a12; --shadow:0 2px 6px rgba(51,37,22,.18), 0 1px 2px rgba(51,37,22,.12); /* ===== 文字サイズ（6段の型スケール） ===== Phase 3 の実測で 8.5px〜16.5px の13種が場当たりに散っていた。 階層が読み取れないので6段に集約し、モバイルはこの6つを差し替えるだけにする。 font-size に生pxを書いてよいのは装飾（絵文字・アイコン・看板の意匠）だけ。 */ --fs-h1:19px; /* 画面見出し・統計カードの主値 */ --fs-h2:15px; /* 節見出し */ --fs-h3:13px; /* 小見出し・フォーム部品・ボタン */ --fs-body:12.5px; /* 本文・表のセル */ --fs-sm:11.5px; /* 補助テキスト・表の見出し・バッジ */ --fs-xs:10.5px; /* 極小（キャレット等） */ /* カレンダーのセルだけは別スケール。7列を375pxに収める密度が本文と両立しないため、 意図的な例外として3つだけ独立させる（場当たりに散らさないための宣言）。 */ --fs-cell:11.5px; --fs-cell-p:12.5px; --fs-cell-t:10.5px; /* ===== 行送り ===== このアプリは DotGothic16（.pixel）と M PLUS 1p を混在させる。 line-height:normal のままだと両フォントで行箱の高さが変わり、 フレックス行で align-items:center したときに視覚的なベースラインがずれる。 明示的に固定して行箱を揃える。 */ --lh-tight:1.2; /* 見出し・数値 */ --lh-base:1.5; /* 本文 */ /* ===== 余白（4pxグリッド） ===== */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; /* ===== 入力部品の高さ ===== .filters は align-items:flex-end で並ぶ。高さが揃っていないと 入力欄・月送り・同期バッジ・更新ボタンの下端が合わず段差になる。 */ --ctl-h:34px; --ctl-h-sm:26px; /* ===== ドット絵スプライト（自作・DQのマップアイコン風） ===== もとは絵文字（城・山・✦）だったが、絵文字はOS/フォントで見た目が変わり 「やっつけ感」が出る（本人指摘）。墨シルエット＋金の2トーンで自作し、 パレットを完全一致させた。設計図(ASCII)と生成はscratchpad/make_sprites.py。 */ --sprite-castle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2018%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%221%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%223%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%223%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%2220%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%228%22%20width%3D%226%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%229%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%229%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%229%22%20width%3D%226%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2210%22%20width%3D%2220%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2211%22%20width%3D%2220%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2212%22%20width%3D%2211%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2213%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2215%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2215%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2215%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2215%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2215%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2216%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3C%2Fsvg%3E"); /* チャッピー作 24x18（2026-07-29差し替え） */ --sprite-mountain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2012%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%2211%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%222%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%223%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%224%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%2210%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%225%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%226%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%227%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%228%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%228%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%228%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%228%22%20width%3D%226%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%229%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%229%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%229%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2210%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2211%22%20width%3D%2224%22%20height%3D%221%22%20fill%3D%22%23332516%22%2F%3E%3C%2Fsvg%3E"); /* チャッピー作 24x12（2026-07-29差し替え） */ --sprite-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2014%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%226%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e6c979%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%2210%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2210%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%226%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23fdf3d8%22%2F%3E%3C%2Fsvg%3E"); /* チャッピー作 12x14（2026-07-29差し替え） */ /* ナビ用ドット絵アイコン10種（チャッピー作・2026-07-29）。 絵文字アイコンはOS依存で見た目が揃わないため置き換える。 元データ: C:\Claude Code\pips_quest\pips-quest-icons.html */ --icon-dash: url("/static/img/icons/dash.png"); /* チャッピー画像版 2026-07-29 */ --icon-trades: url("/static/img/icons/trades.png"); /* チャッピー画像版 2026-07-29 */ --icon-accounts: url("/static/img/icons/accounts.png"); /* チャッピー画像版 2026-07-29 */ --icon-report: url("/static/img/icons/report.png"); /* チャッピー画像版 2026-07-29 */ --icon-calendar: url("/static/img/icons/calendar.png"); /* チャッピー画像版 2026-07-29 */ --icon-stats: url("/static/img/icons/stats.png"); /* チャッピー画像版 2026-07-29 */ --icon-backtest: url("/static/img/icons/backtest.png"); /* チャッピー画像版 2026-07-29 */ --icon-sim: url("/static/img/icons/sim.png"); /* 電卓（denntaku）2026-07-29 */ --icon-goals: url("/static/img/icons/goals.png"); /* チャッピー画像版 2026-07-29 */ --icon-memo: url("/static/img/icons/memo.png"); /* チャッピー画像版 2026-07-29 */ --icon-settings: url("/static/img/icons/settings.png"); /* チャッピー画像版 2026-07-29 */ } *{margin:0;padding:0;box-sizing:border-box} /* hidden 属性を必ず効かせる。 ブラウザ標準の [hidden]{display:none} は詳細度(0,1,0)で、 .modal-bg{display:flex} のようなクラス指定と同点になり後勝ちで負ける。 その結果 JS が hidden=true にしてもモーダルが消えず、透明な覆いが クリックを全部飲む不具合を実際に踏んだ。ここで一括して抑える。 */ [hidden]{display:none !important} html{font-size:15px} body{ font-family:'M PLUS 1p','Meiryo',sans-serif; color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-base); background: radial-gradient(ellipse at 20% 10%, rgba(255,250,235,.55), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(120,90,45,.18), transparent 50%), repeating-linear-gradient(0deg, rgba(120,95,55,.035) 0 2px, transparent 2px 4px), var(--parch); min-height:100vh; font-feature-settings:"tnum"; } /* DotGothic16 は400の1ウェイトしか読み込んでいない。 font-weight:700 を当てると合成太字になり、ピクセルフォントの輪郭が濁る。 .pixel の階層は「大きさと色」で作り、太字は使わない。 */ .pixel{font-family:'DotGothic16','MS Gothic',monospace; letter-spacing:.02em; font-weight:400} /* ===== layout ===== */ .app{display:grid; grid-template-columns:212px minmax(0,1fr); min-height:100vh; max-width:100%} .mbar{grid-column:1/-1; min-width:0} @media(min-width:821px){.mbar{display:none}} /* min-width:0 が無いと、グリッドの 1fr トラックが中身（同期状態のテーブル等）の 最小内容幅に押し広げられ、狭い画面で横スクロールが出る */ main{ padding:18px 22px 40px; max-width:1400px; min-width:0; /* 本文（メニュー以外）の背景に地図イラストの羊皮紙(haikei.png由来)を敷く。 fixed でスクロールしても絵が流れないようにする。パネル類は不透明カード なので可読性には影響せず、隙間から絵が覗く。 */ background:url("/static/img/bg_main.jpg") center / cover no-repeat fixed; } /* ===== sidebar ===== */ .side{ background:linear-gradient(180deg,#221609 0%, #191008 30%, #14100b 100%); border-right:3px solid #0c0805; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; overflow-y:auto; } /* 2026-07-29差し替え: 旗・紋章・ワードマークを全部持つ透過PNG (banner_side.png) 1枚に。旧実装のCSS旗(clip-path)・盾スプライト・ h1文字は画像に内包されたため廃止。 */ .banner{margin:14px auto 10px;width:150px} .banner img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))} nav{padding:6px 10px 0; flex:0 0 auto} .nav-item{ position:relative; /* ▶カーソル(::before)を絶対配置する基準にする */ display:flex;align-items:center;gap:10px;padding:9px 12px 9px 24px;margin:2px 0; color:#cbb58a;font-size:var(--fs-h3);line-height:var(--lh-tight); border-radius:8px;cursor:pointer; border:1px solid transparent; user-select:none; text-decoration:none; } .nav-item .ico{width:20px;text-align:center;font-size:15px;filter:grayscale(.2);line-height:1} .nav-item:hover{background:rgba(230,201,121,.1);color:#f0e0b4} .nav-item.active{ background:linear-gradient(180deg,#f7efdb,#e9dcbd); color:var(--ink); border:1px solid #b79c66; box-shadow:0 1px 0 rgba(0,0,0,.4); } /* DQのコマンド選択カーソル。▶は常に生成しておき、非アクティブ時は transparent にするだけで幅は変えない。position:absolute にしてあるのは、 flexの子として数えると gap 分の間隔まで状態によって変わってしまうのを避けるため （常に同じ padding-left を確保しているので、hover/active の切り替えで 他の項目が横に動くことはない）。 */ .nav-item::before{ content:'\25B6';position:absolute;left:9px;top:50%;transform:translateY(-50%); font-size:var(--fs-xs);line-height:1;color:transparent; } .nav-item.active::before{ color:var(--ink); animation:pq-cursor-blink 1.05s steps(1, end) infinite; } /* デザイン意図（スタディ .dq-nav 由来）: マウスがメニュー内のどこかにある間は 「今どれを選ぼうとしているか」を hover 中の項目の▶で示し、 紛らわしくならないよう active の▶はメニュー hover 中だけ隠す。 マウスがメニュー外に出れば active の▶表示に戻る。 */ .nav-item:hover::before{color:var(--ink)} .side nav:hover .nav-item.active::before{color:transparent} @keyframes pq-cursor-blink{50%{opacity:.15}} /* ===== 今日の名言（モック pips_quest/pips quest mock.html の .quote 準拠） ===== nav の直後・margin-top:auto でサイドバー最下部に沈める固定の札。 文言は app.js が日付シードで選ぶ（今日の名言 = 同じ日は同じ内容）。 色はモックの生の色指定（#efe1bd/#dcc99a/#6d5836/#f6ecd2/#7a5c22/#41301a）を、 このプロジェクトの既存トークンで最も近い色に置き換えている （#6d5836→--ink-soft、#41301a→--ink、背景の淡いベージュ→--parch/--parch2、 ハイライトの縁→--parch2）。border-width・border-radius は他の羊皮紙カード群 （.panel .modal 等）と同様この設計にトークンが無いため生pxのまま。 */ .quote{ margin:auto var(--sp-3) var(--sp-4); padding:var(--sp-3) var(--sp-3) var(--sp-4); text-align:center; border-radius:6px; background:linear-gradient(180deg,var(--parch2),var(--parch)); border:2px solid var(--ink-soft); box-shadow:inset 0 0 0 2px var(--parch2), var(--shadow); } .quote .qt{font-size:var(--fs-sm);line-height:var(--lh-tight);color:var(--ink-soft);margin-bottom:var(--sp-2)} .quote p{font-size:var(--fs-body);line-height:var(--lh-base);color:var(--ink)} /* 名言アイコン（チャッピー生成48種から app.js が名言に合わせて日替わりで選ぶ）。 切り出しは縦横比バラバラなので枠を48px角に固定して contain で収める */ .quote .qicon{display:block;width:48px;height:48px;margin:var(--sp-2) auto 0;object-fit:contain} /* ===== ナビの絵文字をドット絵アイコンに置き換える ===== HTMLは変えず、.ico/.bi の絵文字を font-size:0 で隠して背景に描く （絵文字はcolor:transparentでは消えない）。設定ページのサイドバーは data-s を持たないリンクなので href で拾う。 */ .nav-item .ico{ font-size:0;height:16px; background:no-repeat center / 16px 16px; /* チャッピー画像はAAつきの絵画調ドット絵。64→16px縮小は pixelated だと粒が潰れるので通常補間にする */ filter:none; /* 絵文字用の grayscale(.2) を引き継がない（金がくすむ） */ } .nav-item[data-s="dash"] .ico, .nav-item[href="/"] .ico{background-image:var(--icon-dash)} .nav-item[data-s="trades"] .ico{background-image:var(--icon-trades)} .nav-item[data-s="accounts"] .ico{background-image:var(--icon-accounts)} .nav-item[data-s="report"] .ico{background-image:var(--icon-report)} .nav-item[data-s="calendar"] .ico{background-image:var(--icon-calendar)} .nav-item[data-s="stats"] .ico{background-image:var(--icon-stats)} .nav-item[data-s="backtest"] .ico{background-image:var(--icon-backtest)} .nav-item[data-s="sim"] .ico{background-image:var(--icon-sim)} .nav-item[data-s="goals"] .ico{background-image:var(--icon-goals)} .nav-item[data-s="memo"] .ico{background-image:var(--icon-memo)} .nav-item[href="/settings"] .ico{background-image:var(--icon-settings)} /* ページタイトル内のアイコン。絵文字をやめてナビと同じチャッピー画像に そろえる（本人指示: 押した先の表題も変える）。 */ .pticon{ display:inline-block;width:22px;height:22px;flex:0 0 auto; background:no-repeat center / contain; } .pticon[data-i="dash"]{background-image:var(--icon-dash)} .pticon[data-i="trades"]{background-image:var(--icon-trades)} .pticon[data-i="accounts"]{background-image:var(--icon-accounts)} .pticon[data-i="report"]{background-image:var(--icon-report)} .pticon[data-i="calendar"]{background-image:var(--icon-calendar)} .pticon[data-i="stats"]{background-image:var(--icon-stats)} .pticon[data-i="backtest"]{background-image:var(--icon-backtest)} .pticon[data-i="sim"]{background-image:var(--icon-sim)} .pticon[data-i="goals"]{background-image:var(--icon-goals)} .pticon[data-i="memo"]{background-image:var(--icon-memo)} .pticon[data-i="settings"]{background-image:var(--icon-settings)} /* ===== panel / stat / grid ===== */ .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:var(--sp-4)} .stat{ background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:var(--shadow); padding:14px var(--sp-4);display:flex;gap:var(--sp-3);align-items:center; } .stat .ic{font-size:26px;line-height:1;flex:0 0 auto} /* ラベル・値・補足を縦に積む箱。min-width:0 で長い値がカードを押し広げないようにする */ .stat > div{min-width:0} /* ダッシュボードの統計パネルは .cols の右側（380px）に入るので、 4カラムだと1枚76px・内側50pxしか無く 171,541 のような値があふれる（実測）。 この場所だけ2カラムにする。統計画面（全幅）は4カラムのままでよい。 */ #statsArea .grid4,#statsOverview .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} /* 全期間サマリー（今年の損益・総資金）と月次カードの境目 */ #statsOverview{margin-bottom:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px dashed #ddcba0} #statsOverview:empty{display:none} .stat .lb{font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-tight)} .stat .vl{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight)} .stat .sb{font-size:var(--fs-sm);color:var(--ink-faint);line-height:var(--lh-tight)} .pos{color:var(--profit)} .neg{color:var(--loss)} /* ===== ロゴ看板 ===== 2026-07-29差し替え: 額縁・城・山・ワードマークを全部持つ透過PNG (banner_header.png) 1枚に。旧実装のCSS額縁(border+box-shadowリング)・ 疑似要素の城山スプライト・mix-blend-mode:multiply は画像に内包されたため廃止。 */ /* 寸法はチャッピー推奨（2026-07-29）: 幅760px・高さ160px前後・上余白10px・下余白14px。 現画像は約3:1なので max-height:160px が効くと表示幅は約485pxに縮む。 チャッピー曰く枠いっぱい(760×160)にするには画像側を4.75:1(1520×320)で 再構成するのが正解（届いたら banner_header.png を差し替えるだけ）。 */ .logo-wrap{display:flex;justify-content:center;align-items:center;padding:10px 20px 14px} .logo-wrap img{ display:block;width:min(760px,72vw);height:auto;max-height:160px;object-fit:contain; filter:drop-shadow(0 6px 12px rgba(25,16,8,.25)); } @media(min-width:1500px){ .logo-wrap img{width:760px} } @media(max-width:1200px){ .logo-wrap img{width:660px} } @media(max-width:800px){ .logo-wrap img{width:92%;max-height:130px} } /* 更新ボタンと最終更新時刻（生存確認用）。 もとは別々のフレックス項目で、時刻に align-self:center が付いていた。 そのため背の高いフィルタ行の中央に浮いて隣のボタンと行が合わず、 さらに幅が足りないと時刻だけが次の行に取り残されていた。 群にまとめてコントロールと同じ高さに揃える。 */ .refresh-group{display:flex;align-items:center;gap:var(--sp-2);height:var(--ctl-h)} .updated-at{ font-size:var(--fs-sm);line-height:var(--lh-tight); color:var(--ink-faint);white-space:nowrap; } /* 有効/無効バッジ（設定画面の口座一覧で使用・モック143-144行に準拠） */ .tag-run{color:var(--profit);font-weight:700;font-size:var(--fs-sm)} .tag-stop{color:#c07a12;font-weight:700;font-size:var(--fs-sm)} .panel{ background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:var(--shadow); padding:14px var(--sp-4);margin-bottom:14px; } /* 節見出しをDQのメッセージウィンドウ同様の黒帯へ強化する。 出典: pips_quest/pips-quest-dq-ui-study.html の .dq-h3。 二重の縁取りは border(クリーム2px) + box-shadow(焦げ茶黒2px→クリーム系4px)を 重ねて作る（.page-title と同じ手法）。◆装飾の色(--gold-deep)は現行のまま変えない。 リングは外側4pxまで広がるが、.panel の padding(14px以上)の内側に収まる。 */ .panel h3{ font-size:var(--fs-h2);line-height:var(--lh-tight); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2); margin-bottom:var(--sp-2); color:var(--parch2); background:var(--wood); border:2px solid var(--parch2);border-radius:8px; box-shadow: 0 0 0 2px var(--wood), 0 0 0 4px rgba(253,243,216,.82); /* DQ風の小さなドット装飾だけを足す。h3 は justify-content:space-between の flexコンテナで、report.js の