/* ===================================================================== * common-ui.css — RFT課題プラットフォーム共通UIスタイル * --------------------------------------------------------------------- * 目的: 完了画面のボタン/カード/テーブルの見た目を全画面で統一する。 * 方針: * - すべて rui- 接頭辞。既存クラス(.btn / .stat-card / .sample-band 等)とは * 名前が重ならないため、課題実行画面の作り込みには一切影響しない。 * - 対象者iPadのタッチ操作を最優先（大きめボタン・広い余白）。 * - やわらかく落ち着いた配色・角丸16px。 * * ▼配色は2系統（テーマ）に分離（2026-06-26） * - 既定(:root) = 対象者テーマ＝案4ハーブ／オリーブ（あたたかい黄緑）。 * 対象者系ページ(matching自主実行 / task-browser / * task-runner 等)はクラス指定なしでこの色になる。 * - .rui-theme-supporter = 支援者テーマ＝案3ティール（クールな青緑）。 * 支援者ページの等にこのクラスを付与する。 * - .rui-theme-participant = 対象者テーマの明示指定（=既定と同値）。 * トークン名(--rui-primary-1 等)は不変。値だけをテーマ単位で差し替える。 * * ▼完了画面ボタンの配置規約（2026-06-26 確定） * - 容器は .rui-actions（横並び・中央寄せ・gap）。 * - DOM の並び順がそのまま左→右になる。規約は次のとおり: * 左 = 離脱ボタン（戻る/おわる） → .rui-btn .rui-btn-secondary * 右 = 主アクション（次へ/ダウンロード） → .rui-btn .rui-btn-primary * - ラベルは文脈に応じて「次のタスクへ →」/「おわる →」に統一。 * - ボタンが1つだけの画面は中央単独でよい。 * ===================================================================== */ :root { /* ---- 構造トークン（テーマ非依存・全画面共通） ---- */ --rui-radius: 16px; --rui-radius-sm: 12px; --rui-sp-1: 8px; --rui-sp-2: 16px; --rui-sp-3: 24px; --rui-sp-4: 32px; --rui-shadow: 0 2px 8px rgba(0,0,0,.08); --rui-shadow-card: 0 1px 3px rgba(60,50,90,.06); --rui-font: -apple-system, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", sans-serif; /* ---- 既定パレット＝対象者テーマ（案4 ハーブ／オリーブ） ---- */ --rui-primary-1: #7FB069; --rui-primary-2: #6CA34F; --rui-success-1: #5BB98C; --rui-success-2: #4FA87D; --rui-secondary: #8E9183; --rui-secondary-press: #787B6E; --rui-warning: #E9A94E; --rui-surface: #FFFFFF; --rui-card: #F3F6EB; --rui-bg: #FBF9F2; --rui-bg-grad-1: #D9E7C5; --rui-bg-grad-2: #EDF2E2; --rui-text: #313328; --rui-text-sub: #6E7163; --rui-line: #E4E9D7; } /* ---- 対象者テーマ（明示指定用・既定と同値） ---- */ .rui-theme-participant { --rui-primary-1: #7FB069; --rui-primary-2: #6CA34F; --rui-success-1: #5BB98C; --rui-success-2: #4FA87D; --rui-secondary: #8E9183; --rui-secondary-press: #787B6E; --rui-warning: #E9A94E; --rui-surface: #FFFFFF; --rui-card: #F3F6EB; --rui-bg: #FBF9F2; --rui-bg-grad-1: #D9E7C5; --rui-bg-grad-2: #EDF2E2; --rui-text: #313328; --rui-text-sub: #6E7163; --rui-line: #E4E9D7; } /* ---- 支援者テーマ（案3 ティール） ---- */ .rui-theme-supporter { --rui-primary-1: #34B6A6; --rui-primary-2: #1F9183; --rui-success-1: #57C495; --rui-success-2: #46B07D; --rui-secondary: #7F8A93; --rui-secondary-press: #6B757D; --rui-warning: #E6A24B; --rui-surface: #FFFFFF; --rui-card: #EAF4F2; --rui-bg: #F6FBFA; --rui-bg-grad-1: #CDE7E1; --rui-bg-grad-2: #E6F2EF; --rui-text: #213330; --rui-text-sub: #5A6B68; --rui-line: #D4E7E3; } /* ---- 完了画面の見出し ---- */ .rui-result-title { text-align: center; font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--rui-text); margin-bottom: var(--rui-sp-1); } .rui-result-subtitle { text-align: center; color: var(--rui-text-sub); font-size: 15px; margin-bottom: var(--rui-sp-4); } /* ---- 統計カード ---- */ .rui-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--rui-sp-2); margin-bottom: var(--rui-sp-4); } .rui-stat-card { background: var(--rui-card); border-radius: var(--rui-radius-sm); padding: var(--rui-sp-3) var(--rui-sp-2); text-align: center; box-shadow: var(--rui-shadow-card); } .rui-stat-card .rui-label { font-size: 13px; color: var(--rui-text-sub); margin-bottom: 6px; } .rui-stat-card .rui-value { font-size: clamp(26px, 4vw, 34px); font-weight: 700; color: var(--rui-text); } .rui-stat-card.rui-accent .rui-value { background: linear-gradient(135deg, var(--rui-primary-1), var(--rui-primary-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---- 試行履歴テーブル ---- */ .rui-history-title { font-size: 16px; font-weight: 700; color: var(--rui-text); margin-bottom: var(--rui-sp-2); } .rui-history-wrap { border-radius: var(--rui-radius-sm); overflow: hidden; border: 1px solid var(--rui-line); margin-bottom: var(--rui-sp-4); } .rui-table { width: 100%; border-collapse: collapse; font-size: 15px; } .rui-table thead th { background: linear-gradient(135deg, var(--rui-primary-1), var(--rui-primary-2)); color: #fff; font-weight: 600; padding: 14px 12px; text-align: left; } .rui-table tbody td { padding: 14px 12px; border-top: 1px solid var(--rui-line); color: var(--rui-text); } .rui-table tbody tr:nth-child(even) { background: #FBFBFD; } .rui-ok { color: var(--rui-success-2); font-weight: 600; } /* ---- アクションボタン群 ---- * 配置規約: DOM順がそのまま左→右。 * 左 = 離脱(.rui-btn-secondary) / 右 = 主アクション(.rui-btn-primary) */ .rui-actions { display: flex; flex-wrap: wrap; gap: var(--rui-sp-2); justify-content: center; align-items: stretch; } .rui-btn { appearance: none; border: none; cursor: pointer; font-family: var(--rui-font); font-size: 17px; font-weight: 600; min-height: 56px; padding: 16px 28px; border-radius: var(--rui-radius); color: #fff; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-width: 200px; } .rui-btn:hover { transform: translateY(-1px); box-shadow: var(--rui-shadow); } .rui-btn:active { transform: translateY(0); } .rui-btn:focus-visible { outline: 3px solid #B9BEF2; outline-offset: 2px; } .rui-btn-success { background: linear-gradient(135deg, var(--rui-success-1), var(--rui-success-2)); } .rui-btn-secondary { background: var(--rui-secondary); } .rui-btn-secondary:hover { background: var(--rui-secondary-press); } .rui-btn-primary { background: linear-gradient(135deg, var(--rui-primary-1), var(--rui-primary-2)); } .rui-btn-warning { background: var(--rui-warning); } .rui-hint { text-align: center; color: var(--rui-text-sub); font-size: 14px; margin-top: var(--rui-sp-3); } @media (prefers-reduced-motion: reduce) { .rui-btn { transition: none; } }