/* ============================================================ ことのわテーマ CSS (light / dark / high_contrast) html 要素の data-theme 属性で切り替える: ← デフォルト Tailwind CSS は CDN で読み込まれるため、ここでは CSS 変数のみを定義し、Tailwind と併用する。 ============================================================ */ :root, html[data-theme="light"] { --color-bg: #f9fafb; --color-bg-elevated: #ffffff; --color-bg-sidebar: #ffffff; --color-bg-header: #ffffff; --color-text: #1f2937; --color-text-muted: #6b7280; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-fg: #ffffff; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #3b82f6; --color-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --color-focus-ring: rgba(79, 70, 229, 0.4); /* フォントサイズ (ユーザー設定で上書き) */ --font-size-base: 16px; --font-size-sm: 14px; --font-size-lg: 18px; --font-size-xl: 22px; /* タッチターゲット最小サイズ (タブレット配慮) */ --touch-target-min: 48px; } html[data-theme="dark"] { --color-bg: #0f172a; --color-bg-elevated: #1e293b; --color-bg-sidebar: #1e293b; --color-bg-header: #1e293b; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-border: #334155; --color-border-strong: #475569; --color-primary: #818cf8; --color-primary-hover: #6366f1; --color-primary-fg: #0f172a; --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #f87171; --color-info: #60a5fa; --color-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --color-focus-ring: rgba(129, 140, 248, 0.5); } html[data-theme="high_contrast"] { --color-bg: #000000; --color-bg-elevated: #000000; --color-bg-sidebar: #000000; --color-bg-header: #000000; --color-text: #ffffff; --color-text-muted: #d4d4d8; --color-border: #ffffff; --color-border-strong: #ffffff; --color-primary: #ffeb3b; --color-primary-hover: #fde047; --color-primary-fg: #000000; --color-success: #22ff22; --color-warning: #ffeb3b; --color-danger: #ff5252; --color-info: #66e0ff; --color-card-shadow: 0 0 0 2px #ffffff; --color-focus-ring: #ffeb3b; } /* フォントサイズ切替 */ html[data-font-size="sm"] { --font-size-base: 14px; } html[data-font-size="base"] { --font-size-base: 16px; } html[data-font-size="lg"] { --font-size-base: 18px; } /* ============================================================ 基本スタイル ============================================================ */ html { font-size: var(--font-size-base); } body { background-color: var(--color-bg); color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } /* 印刷時は明朝体 (settings.print.default_font_family で上書き可能) */ @media print { body { background: #ffffff !important; color: #000000 !important; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS Mincho", serif; } .no-print { display: none !important; } } /* ============================================================ フォーカスリング (アクセシビリティ) ============================================================ */ *:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; } /* ============================================================ ボタン (タッチ配慮) ============================================================ */ .kn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target-min); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: var(--font-size-base); cursor: pointer; border: none; transition: background-color 0.15s ease; } .kn-btn-primary { background-color: var(--color-primary); color: var(--color-primary-fg); } .kn-btn-primary:hover { background-color: var(--color-primary-hover); } .kn-btn-secondary { background-color: var(--color-bg-elevated); color: var(--color-text); border: 2px solid var(--color-border-strong); } .kn-btn-danger { background-color: var(--color-danger); color: #ffffff; } .kn-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ カード ============================================================ */ .kn-card { background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: var(--color-card-shadow); padding: 1.5rem; } /* ============================================================ ステータスバッジ (色 + アイコン併用: 色覚配慮) ============================================================ */ .kn-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; } .kn-badge-draft { background-color: #fef3c7; color: #92400e; } .kn-badge-approved { background-color: #d1fae5; color: #065f46; } .kn-badge-error { background-color: #fee2e2; color: #991b1b; } .kn-badge-info { background-color: #dbeafe; color: #1e40af; } html[data-theme="dark"] .kn-badge-draft { background-color: #78350f; color: #fef3c7; } html[data-theme="dark"] .kn-badge-approved { background-color: #064e3b; color: #d1fae5; } html[data-theme="dark"] .kn-badge-error { background-color: #7f1d1d; color: #fecaca; } html[data-theme="dark"] .kn-badge-info { background-color: #1e3a8a; color: #dbeafe; } html[data-theme="high_contrast"] .kn-badge-draft, html[data-theme="high_contrast"] .kn-badge-approved, html[data-theme="high_contrast"] .kn-badge-error, html[data-theme="high_contrast"] .kn-badge-info { background-color: #000000; color: #ffffff; border: 2px solid #ffffff; } /* ============================================================ トースト通知 (右上スタック) ============================================================ */ .kn-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; } .kn-toast { background-color: var(--color-bg-elevated); color: var(--color-text); border-left: 4px solid var(--color-info); border-radius: 0.375rem; padding: 1rem 1.25rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); animation: kn-toast-in 0.25s ease-out; } .kn-toast-success { border-left-color: var(--color-success); } .kn-toast-warning { border-left-color: var(--color-warning); } .kn-toast-error { border-left-color: var(--color-danger); } @keyframes kn-toast-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } } /* ============================================================ サイドバー ============================================================ */ .kn-sidebar { background-color: var(--color-bg-sidebar); border-right: 1px solid var(--color-border); } .kn-sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--color-text); text-decoration: none; border-radius: 0.375rem; min-height: var(--touch-target-min); transition: background-color 0.15s ease; } .kn-sidebar-link:hover { background-color: var(--color-bg); } .kn-sidebar-link.active { background-color: var(--color-primary); color: var(--color-primary-fg); } /* ============================================================ ヘッダ ============================================================ */ .kn-header { background-color: var(--color-bg-header); border-bottom: 1px solid var(--color-border); } /* ============================================================ PWA Bottom navigation (mobile only, < md = < 768px) 2026-05-20 Founder β 検証で発覚した mobile nav 不在の解消. 上部 nav (.kn-header の `hidden md:flex`) は tablet/desktop 用、 PWA の主戦場である Android/iPhone スマホでは bottom nav が主要 nav. 主要 4 link: ダッシュボード / 録音 / レポート / 利用者 (録音アップロード / エクスポート / admin 各種は上部 nav のみ — desktop 想定) ============================================================ */ .kn-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: stretch; height: 56px; padding-bottom: env(safe-area-inset-bottom, 0); background-color: var(--color-bg-header); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); z-index: 50; } .kn-bottom-nav-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--color-text-muted); text-decoration: none; font-size: 0.7rem; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, background-color 0.15s ease; } .kn-bottom-nav-link:hover, .kn-bottom-nav-link:focus-visible { color: var(--color-primary); background-color: var(--color-bg); } .kn-bottom-nav-link[aria-current="page"] { color: var(--color-primary); font-weight: 600; } .kn-bottom-nav-icon { font-size: 1.5rem; line-height: 1; } .kn-bottom-nav-label { font-size: 0.7rem; line-height: 1; letter-spacing: 0.02em; } @media (min-width: 768px) { .kn-bottom-nav { display: none; } } @media (max-width: 767px) { main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 1rem); } } @media print { .kn-bottom-nav { display: none; } }