/* ===================================================================== キャメル / Camel — colors_and_type.css サファリテック株式会社 / 地質調査 業務ツール すべての色・タイポはこの :root 変数を参照すること。 インラインで色を直書きしない（絶対遵守 / 60-30-10）。 ===================================================================== */ /* --------------------------------------------------------------------- フォント（外部CDN禁止 / Inter 自己ホスト） 本番アプリ（Camel）は Inter を自己ホスト済み。Inter 前提でデザインする。 --------------------------------------------------------------------- */ /* 本番アプリ（Camel）は Inter を自己ホスト済み。Inter 前提でデザインする。 このリポジトリの静的プレビューは未同梱のため Hiragino / Yu Gothic に フォールバックして描画される（見た目は近似）。 */ :root { /* === 基本フォントスタック ============================================ */ --font-sans: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Meiryo", "Helvetica Neue", Arial, sans-serif; --font-num: "Inter", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif; /* tabular-nums で数値整列 */ /* === 60 / ベース（背景） ============================================= */ --c-sand: #FAF6EE; /* 砂ベージュ・全体背景 60% */ /* === 30 / 面（カード・ヘッダ・case-bar） ============================ */ --c-white: #FFFFFF; /* 純白・面 30% */ /* === 10 / 主役（CTA・リンク・アクティブ） ========================== */ --c-navy: #1F4D8A; /* 深ネイビー・主CTA/リンク/アクティブ 10% */ --c-navy-hover: #163E73; /* 濃・hover/press */ --c-navy-light: #2D5EA5; /* 淡・補助、focus ring 等 */ /* === サブカラー（意味色 / 地層モチーフ） ============================ */ --c-soil: #7A4F22; /* 砂岩茶・土質境界 */ --c-decor: #C9A77C; /* 装飾サンド・イラスト/ロゴ地 */ --c-sage: #5C6B5A; /* セージ・層境界 */ --c-silt: #7A8C9E; /* シルト灰・補助テキスト/地表点線 */ /* === 背景バリエーション ============================================= */ --c-cream: #FFF6E0; /* 薄黄・hover地 / 注記地 / AIバッジ地 */ /* === 罫線 =========================================================== */ --c-border: #E0DCD0; /* 標準境界線 */ --c-border-strong:#C4BFB1; /* 強調境界線 */ /* === テキスト（ネイビー/グレー系を流用、新色追加なし） ============== */ --c-text: #1F2A37; /* 本文（ネイビー寄りダーク） */ --c-text-sub: #4B5563; /* 副文 */ --c-text-muted: #7A8C9E; /* 補助・キャプション（=シルト灰） */ --c-text-on-navy: #FFFFFF; /* ネイビー面上の文字 */ /* === 状態色（警告とエラーを色で分離） =============================== */ --c-warn-text: #B45309; /* 警告・文字 */ --c-warn-bg: #FFF6E0; /* 警告・地（薄黄） */ --c-warn-band: #B45309; /* 警告・左アンバー帯 */ --c-error: #DC2626; /* エラー */ --c-error-strong: #B22222; /* エラー・強 */ --c-error-bg: #FEE2E2; /* エラー・地（赤系・エラー専用） */ --c-success: #2E8B57; /* 成功 */ --c-success-bg: #D1FAE5; /* 成功・地 */ /* === 根拠バッジ（出典の信頼性を色で示す / WCAG AA） ================= */ --c-badge-input-text: #1F4D8A; /* input=青（手入力） */ --c-badge-input-bg: #EAF1FA; --c-badge-master-text:#2E8B57; /* master=深緑（マスタ参照） */ --c-badge-master-bg: #D1FAE5; --c-badge-ai-text: #8A5A08; /* ai=焦げアンバー（AI抽出） */ --c-badge-ai-bg: #FFF6E0; /* 薄黄地 */ /* === タイポグラフィ・スケール（本文16px / 行間1.5） ================ */ --fs-display: 34px; --lh-display: 1.25; --fw-display: 800; --fs-h1: 28px; --lh-h1: 1.3; --fw-h1: 700; --fs-h2: 22px; --lh-h2: 1.35; --fw-h2: 700; --fs-h3: 18px; --lh-h3: 1.4; --fw-h3: 600; --fs-body-lg: 18px; --lh-body-lg: 1.6; --fw-body-lg: 400; --fs-body: 16px; --lh-body: 1.5; --fw-body: 400; --fs-sm: 14px; --lh-sm: 1.5; --fw-sm: 400; --fs-caption: 13px; --lh-caption: 1.45; --fw-caption: 400; --fs-label: 12px; --lh-label: 1.4; --fw-label: 600; /* === 8pt グリッド・スペーシング ==================================== */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-8: 64px; /* === 地層フィル（柱状図の塗り・既存パレットの濃淡で構成） ========== */ /* 新色ではなく、砂岩茶/装飾サンド/セージ/シルト灰の濃淡で土質を識別 */ --geo-banktop: #E7D6BC; /* 盛土（装飾サンド 淡） */ --geo-sand: #D8BC93; /* 砂・細砂（装飾サンド） */ --geo-gravel: #B98F5F; /* 礫混じり（砂岩茶 寄り） */ --geo-silt: #B9C2CB; /* シルト（シルト灰 淡） */ --geo-clay: #A7B0A2; /* 粘土（セージ 淡） */ --geo-rock: #8A6A45; /* 岩盤（砂岩茶 濃） */ --c-boundary-layer: var(--c-navy); /* 層境界線 = ネイビー (dt14 R2 U1: 意味と色を1対1) */ --c-boundary-soil: var(--c-soil); /* 土質境界線 = 砂岩茶 */ /* === 角丸（8〜12px） =============================================== */ --r-sm: 6px; /* バッジ・タグ */ --r-md: 8px; /* ボタン・入力 */ --r-lg: 12px; /* カード・モーダル */ --r-pill: 999px; /* === 影（控えめ・y>x・薄い多層） ================================== */ --shadow-xs: 0 1px 1px rgba(31, 42, 55, 0.04); --shadow-sm: 0 1px 2px rgba(31, 42, 55, 0.06), 0 1px 3px rgba(31, 42, 55, 0.04); --shadow-md: 0 2px 4px rgba(31, 42, 55, 0.05), 0 4px 8px rgba(31, 42, 55, 0.05); --shadow-lg: 0 4px 10px rgba(31, 42, 55, 0.06), 0 12px 24px rgba(31, 42, 55, 0.08); --ring-focus: 0 0 0 3px rgba(45, 94, 165, 0.35); /* navy-light 35% */ /* === レイアウト ==================================================== */ --measure: 70ch; /* 行長 45–75ch */ --header-h: 56px; --sidebar-w: 240px; } /* ===================================================================== セマンティック・タイプ・ユーティリティ （HTMLでは class を使い、サイズ直書きを避ける） ===================================================================== */ .t-display { font: var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-sans); color: var(--c-text); letter-spacing: .01em; } .t-h1 { font: var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-sans); color: var(--c-text); } .t-h2 { font: var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-sans); color: var(--c-text); } .t-h3 { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-sans); color: var(--c-text); } .t-body-lg { font: var(--fw-body-lg) var(--fs-body-lg)/var(--lh-body-lg) var(--font-sans); color: var(--c-text); } .t-body { font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--c-text); } .t-sm { font: var(--fw-sm) var(--fs-sm)/var(--lh-sm) var(--font-sans); color: var(--c-text-sub); } .t-caption { font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--c-text-muted); } .t-label { font: var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--c-text-sub); letter-spacing: .04em; } /* 数値（柱状図・N値・数量集計などは必ず tabular-nums で整列） */ .t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } a { color: var(--c-navy); text-decoration: none; } a:hover { color: var(--c-navy-hover); text-decoration: underline; } /* スキップリンク (agent.css .sr-only-focusable = ネイビー地 + 白文字) の hover 復帰。 直上の a:hover (0,1,1) が .sr-only-focusable (0,1,0) の color:#fff を上書きするため、 focus 中に hover すると「ネイビー地にネイビー文字」= 1.26:1 で文字が消える。 (0,2,0) で色だけ白に戻す (背景/装飾には触れない)。 同型再発: メモリ feedback_navy_anchor_button_hover_color。 */ .sr-only-focusable:hover { color: #fff; } /* ===================================================================== [hidden] 属性の構造的強制 (dt21 Fix-1 / 2026-07-25) --------------------------------------------------------------------- UA スタイルの `[hidden]{display:none}` は詳細度 (0,0,1) 相当しかないため、 `.foo{display:flex}` のような **class 1 個の規則にすら負ける**。結果 「JS が el.hidden = true にしたのに画面に出続ける」という不可視バグが 個々の CSS ファイルごとに再発し続けていた (メモリ feedback_hidden_attr_vs_class_display)。 実測 (Playwright・全ページ悉皆スイープ 2026-07-25 / 本規則を入れる前): 案件詳細 #cd-fd-upload .cd-fd__upload flex 958x144 データ入力 #file-list-actions .file-list-actions flex 1150x32 データ入力/解析/出力 #case-header-status .case-header-status flex 17x8 解析 #bl-ocr-xml-banner .bl-ocr-xml-banner flex 1150x68 解析 #bl-soil-compare-toggle-inline flex 1216x23 解析 他 6 件 (0x0) / 出力 #chap3-edit-actions / 土質試験 #file-list-actions 計 16 件が「hidden なのに描画されている」。#cd-fd-upload は実際に elementFromPoint で掴め、ファイル選択→送信まで到達できてしまっていた。 ★ここに置く理由: camel_tokens.css は base.html の最上流 (他の全 CSS より前) に 読み込まれる。順序では必ず負けるので !important で詳細度・順序の両方を無効化する。 ★安全性の裏取り (推測でなく機械確認): - CSS: 既存の `[hidden]` 規則は全て display:none 側 (grep 済)。 `:not([hidden])` を使う規則 (.bl-modal:not([hidden]) 等) は否定なので無影響。 - JS : `style.display` に可視値を代入している箇所 (13 件) はすべて `style="display:none"` 運用の要素で hidden 属性を持たない。hidden と併用する 2 箇所 (sprint35_sub16.js _showHydrateSpinner / soil_test.js sample-link-method-other) はいずれも **hidden=false を先に立ててから** display を書くため影響なし。 - `hidden="until-found"` の利用は 0 件 (grep 済) = 検索時展開を壊さない。 ===================================================================== */ [hidden] { display: none !important; } /* ===================================================================== 互換エイリアス・ブロック (SSOT 統合 / Sprint 36 UI 刷新 2026-06-04) --------------------------------------------------------------------- 目的: 実アプリには歴史的経緯で 3 系統のトークンが存在する。 (A) --c-* … 本ファイル = 唯一の正本 (SSOT) (B) --camel-* … sprint32_camel.css :root (旧 Camel 統一トークン) (C) --color-* … report_demo_base.css :root (report-demo 由来トークン) 本ブロックは (B)(C) のうち「現状値が (A) と完全一致するもの だけ」を --c-* へ var() で寄せ、3 系統を単一情報源に集約する。 【見た目不変が絶対条件】 - マップするのは現値が --c-* と 1bit も違わないトークンのみ。 - 微差トークン (例 --camel-text #1F2937 ≠ --c-text #1F2A37、 --camel-text-soft / --camel-sand-light / success/warn/error 等) は 値がズレるため マップせず現状維持 (各正本 :root の literal が生きる)。 - フォールバックに現値の literal を併記。読込順や欠落が起きても 現値に pin され、色が変わらないことを二重に保証する。 【カスケード注記】 camel_tokens.css は base.html 最上流 (report_demo_base / sprint32_camel より前) で読み込む。よって本ブロックの値は、後続ファイルが同名トークンを literal で再定義している現状ではそれらに上書きされる。ただし上書き後の 値は本ブロックと完全一致 (= マップ条件) のため、いずれが勝っても表示は不変。 後続ファイルがトークン定義を撤去 (= --c-* 一本化) した時点で本ブロックが 効力を持ち、SSOT が完成する。本 Sub では正本 :root には手を入れない (各画面リファインは後続ジェネレーターの領分)。 ===================================================================== */ :root { /* ---- (B) --camel-* → --c-* (現値一致のみ) -------------------------- */ --camel-main-base: var(--c-sand, #FAF6EE); /* 60% 砂ベージュ */ --camel-sub: var(--c-white, #FFFFFF); /* 30% 白 */ --camel-accent: var(--c-navy, #1F4D8A); /* 10% ネイビー */ --camel-info: var(--c-navy, #1F4D8A); /* = accent 同値 */ --camel-accent-dark: var(--c-navy-hover, #163E73); /* hover/press */ --camel-accent-light: var(--c-navy-light, #2D5EA5); /* focus 等 */ --camel-sandstone: var(--c-decor, #C9A77C); /* 装飾サンド */ --camel-silt-gray: var(--c-silt, #7A8C9E); /* シルト灰 */ --camel-sub-accent: var(--c-cream, #FFF6E0); /* 薄黄 hover地 */ --camel-text-muted: var(--c-text-sub, #4B5563); /* 副文 */ --camel-border: var(--c-border, #E0DCD0); /* 罫線 */ --camel-border-strong: var(--c-border-strong, #C4BFB1); /* 強罫線 */ /* 非マップ (値ズレ→現状維持): --camel-text #1F2937 / --camel-text-soft #6B7280 / --camel-sand-light #D9B98F / --camel-success #4F8F4F / --camel-warn #E8A33D / --camel-error #D9534F */ /* ---- (C) --color-* → --c-* (現値一致のみ) -------------------------- */ /* report_demo_base.css の正本値に一致するもののみ寄せる。なお bg/primary/ border/text 系は sprint32_camel.css が既に --camel-* へ寄せ済 (二段 エイリアスでも最終的に同じ --c-* へ収束) のため、ここでは未寄せ かつ 現値一致の構造トークンを中心に集約する。 */ --color-surface: var(--c-white, #FFFFFF); /* 30% 白 (同値) */ --color-primary: var(--c-navy, #1F4D8A); /* 10% ネイビー */ --color-input: var(--c-navy, #1F4D8A); /* 根拠バッジ 青 (#1F4D8A 同値) */ /* 非マップ (値ズレ→現状維持): --color-bg-subtle / --color-surface-hover / --color-primary-hover #18407A (camel-accent-dark #163E73 と別) / --color-primary-active #0F2942 / --color-primary-soft #E8EEF7 / --color-input-bg #E8EEF7 (--c-badge-input-bg #EAF1FA と別) / --color-master #2A6E4F / --color-ai #9B6B00 / --color-text #1A1A1A / --color-text-sub #505050 / --color-text-muted #6B6B6B / --color-border #E3E6EB / --color-border-strong #C9CED6 / 状態色 success/error/warning。 これらは --c-* と 1bit でも異なるため寄せない (見た目不変を厳守)。 */ } /* ===================================================================== Sprint 38 Sub-5: 仕様書/見積書インテーク (s38) トークン --------------------------------------------------------------------- confidence 3 段階 (D-04) のセマンティクスは径×コアバッジの 3 値 (緑=高確度 / 金茶=中・要確認 / 茶=低・候補のみ) を踏襲する。 既存トークンと値が一致するものは var() で寄せ、新規 hex は本ファイルでのみ 定義する (使用側 CSS での色直書きは禁止 / 60-30-10 内・新系統色なし)。 ===================================================================== */ :root { /* confidence 高 (≥0.85): 緑 = master 系 bg を踏襲しつつ text は AA 達成の 濃緑を s38 専用に新定義 (#D1FAE5 上で 5.7:1。--c-badge-master-text は不変) */ --s38-conf-high-text: #1E6B45; --s38-conf-high-bg: var(--c-badge-master-bg, #D1FAE5); /* confidence 中 [0.6,0.85): 金茶 = AI バッジ系 (要確認) を流用 */ --s38-conf-mid-text: var(--c-badge-ai-text, #8A5A08); --s38-conf-mid-bg: var(--c-badge-ai-bg, #FFF6E0); /* confidence 低 (<0.6 / undefined): 茶 = 砂岩茶 + 盛土淡 (候補のみ提示) */ --s38-conf-low-text: var(--c-soil, #7A4F22); --s38-conf-low-bg: var(--geo-banktop, #E7D6BC); /* 投入ボックス (ドロップゾーン) */ --s38-zone-border: var(--c-border-strong, #C4BFB1); --s38-zone-bg: var(--c-white, #FFFFFF); --s38-zone-bg-hover: var(--c-cream, #FFF6E0); --s38-zone-accent: var(--c-navy, #1F4D8A); } /* ===================================================================== RQD 人手レビュー (Sub-6) トークン --------------------------------------------------------------------- ui-ux-evaluator (Critical/アクセシビリティ) 対応: - 緑バッジ/効果ラベルの前景を一段濃く (--s38-conf-high-text と同パターン)。 --c-success #2E8B57 on #D1FAE5 = 3.4:1 (AA 未達) → #1E6B45 = 5.7:1 (AA 達成)。 - 無効 CTA「確定して保存」の可読性 (旧 #FFF on #C4BFB1 = 1.84:1 → AA 達成へ)。 砂地 + 副文字 + 強境界で、押せないが文言は読める無効状態にする。 既存トークンと一致するものは var() で寄せ、新規 hex は本ファイルでのみ定義。 ===================================================================== */ :root { /* 確認済み/分断しない 等の緑バッジ前景 (AA 達成の濃緑。#D1FAE5 上で 5.7:1) */ --rqd-conf-text: var(--s38-conf-high-text, #1E6B45); --rqd-conf-bg: var(--c-success-bg, #D1FAE5); /* 無効 CTA (押下不可だが文言は AA 可読): #4B5563 on #FAF6EE = 7.0:1 */ --rqd-btn-disabled-bg: var(--c-sand, #FAF6EE); --rqd-btn-disabled-text: var(--c-text-sub, #4B5563); --rqd-btn-disabled-border: var(--c-border-strong, #C4BFB1); } /* ===================================================================== Sprint 38 Sub-6: 食い違い確認 UI (s38 conflict) トークン --------------------------------------------------------------------- 「仕様書と見積書で値が異なる = ユーザーの判断待ち」はエラー (赤) ではなく 警告系アンバーで表現する (状態色の意味分離を踏襲・新規 hex なし)。 - チップ文字 #B45309 on #FFF6E0 = 4.67:1 (WCAG AA) - 解決済みチップ #4B5563 on #FAF6EE = 7.0:1 (WCAG AA) 使用側 CSS (camel_v2_create.css) での色直書きは禁止。 ===================================================================== */ :root { /* 未解決チップ / 未解決一覧 (判断待ち = 警告系アンバー) */ --s38-conflict-text: var(--c-warn-text, #B45309); --s38-conflict-bg: var(--c-warn-bg, #FFF6E0); --s38-conflict-border: var(--c-warn-band, #B45309); /* 解決済みチップ (静かなニュートラル) */ --s38-conflict-resolved-text: var(--c-text-sub, #4B5563); --s38-conflict-resolved-bg: var(--c-sand, #FAF6EE); --s38-conflict-resolved-border: var(--c-border-strong, #C4BFB1); /* モーダル内の選択カード強調 (採用アクション = 10% アクセント) */ --s38-conflict-accent: var(--c-navy, #1F4D8A); } /* ===================================================================== Sprint 38 Sub-10: 計画数量表 当初列 出所バッジ (s38-pq) トークン --------------------------------------------------------------------- 3 種の出所セマンティクス (いずれも薄地上で WCAG AA 4.5:1 以上): - 等分 (自動) = AI 系 金茶 (#8A5A08 on #FFF6E0 = 5.5:1。conf-mid 流用) - 仕様書孔別 = 高確度 緑 (#1E6B45 on #D1FAE5 = 5.7:1。conf-high 流用) - 手入力 = input 青 (#1F4D8A on #EAF1FA = 6.9:1。根拠バッジ input 流用) 未配分プールは「要対応 = 警告系アンバー」(--s38-conflict-* と同系統)。 新規 hex なし・全て既存トークンへの var() 寄せ (60-30-10 内)。 ===================================================================== */ :root { --s38-pq-badge-equal-text: var(--s38-conf-mid-text, #8A5A08); --s38-pq-badge-equal-bg: var(--s38-conf-mid-bg, #FFF6E0); --s38-pq-badge-spec-text: var(--s38-conf-high-text, #1E6B45); --s38-pq-badge-spec-bg: var(--s38-conf-high-bg, #D1FAE5); --s38-pq-badge-manual-text: var(--c-badge-input-text, #1F4D8A); --s38-pq-badge-manual-bg: var(--c-badge-input-bg, #EAF1FA); --s38-pq-pool-band: var(--c-warn-band, #B45309); --s38-pq-pool-text: var(--c-warn-text, #B45309); --s38-pq-pool-bg: var(--c-warn-bg, #FFF6E0); }