/* ============================================================ MediCalc デザイントークン（全ページ共通） ライト/ダーク両対応。手動切替は 、 未指定時は OS 設定 (prefers-color-scheme) に従う。 ============================================================ */ :root { color-scheme: light; /* 面 */ --bg: #f5f7fa; /* ページ背景 */ --surface: #ffffff; /* カード・セクション */ --surface-2: #eef1f5; /* 結果値・サブ背景 */ --surface-3: #e3e8ee; /* ホバー・押下 */ /* 罫線 */ --border: #d9dee5; --border-strong: #aeb8c4; /* テキスト */ --text: #1a222c; /* 本文 */ --text-2: #4c5866; /* 補助 */ --text-3: #66717e; /* ヒント（白背景でコントラスト比 4.5:1 以上） */ /* アクセント（単一ブランド色） */ --accent: #1d5fd6; --accent-strong: #174bab; --accent-soft: #e8f0fe; /* アクセントの淡色面 */ --accent-border: #c3d5f5; --on-accent: #ffffff; /* 意味色 */ --danger: #c62828; /* 異常値・警告テキスト */ --danger-soft: #fdeceb; --danger-border: #f5c6c3; --warn-text: #7a5200; /* 注意書き */ --warn-soft: #fdf3d7; --warn-border: #f0dfa8; --success: #1e7e46; /* 基準値内 */ /* 影・角丸 */ --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.18); --radius: 10px; --radius-sm: 6px; /* タップ最小サイズ */ --tap: 44px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; } /* ダークトークン（手動指定） */ :root[data-theme="dark"] { color-scheme: dark; --bg: #11151b; --surface: #1a2029; --surface-2: #232b36; --surface-3: #2d3644; --border: #333d4a; --border-strong: #4a5666; --text: #e8edf3; --text-2: #aab6c3; --text-3: #8b97a5; --accent: #82aaf5; --accent-strong: #a3c0f8; --accent-soft: #1d2b45; --accent-border: #2e4470; --on-accent: #0d1523; --danger: #ff8a80; --danger-soft: #3a2022; --danger-border: #5c3335; --warn-text: #eac670; --warn-soft: #33291a; --warn-border: #524224; --success: #6fcf97; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ダークトークン（OS設定に従う。手動でライト指定時は除外） */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #11151b; --surface: #1a2029; --surface-2: #232b36; --surface-3: #2d3644; --border: #333d4a; --border-strong: #4a5666; --text: #e8edf3; --text-2: #aab6c3; --text-3: #8b97a5; --accent: #82aaf5; --accent-strong: #a3c0f8; --accent-soft: #1d2b45; --accent-border: #2e4470; --on-accent: #0d1523; --danger: #ff8a80; --danger-soft: #3a2022; --danger-border: #5c3335; --warn-text: #eac670; --warn-soft: #33291a; --warn-border: #524224; --success: #6fcf97; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } } /* ============================================================ 共通コンポーネント ============================================================ */ /* キーボード操作時のみフォーカスリングを表示 */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* スクリーンリーダー専用テキスト */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ツールページ上部バー（戻る + テーマ切替） */ .tool-topbar { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; gap: 8px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; border-radius: var(--radius-sm); color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; } .topbar-back:active { background: var(--surface-3); } .topbar-title { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-spacer { flex: 1; } /* テーマ切替ボタン */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-2); font-size: 17px; cursor: pointer; flex-shrink: 0; } .theme-toggle:active { background: var(--surface-3); } /* 現テーマに応じてアイコンを出し分け（月=ダークへ切替 / 太陽=ライトへ切替） */ .tt-sun { display: none; } :root[data-theme="dark"] .tt-moon { display: none; } :root[data-theme="dark"] .tt-sun { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tt-moon { display: none; } :root:not([data-theme="light"]) .tt-sun { display: inline; } } /* アニメーション抑制設定の尊重 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }