/* gh-reservations services 共有デザインシステム。 shared.jsと同じく、ビルド無しでWorkers Assetsから配信する静的アセットとして全ページからで読み込む。テーマは2系統。予約者向け（スマホ前提・暖色）は、事業者/サービス管理者向け（PC前提・寒色）は。どちらも同じセマンティック変数名を使うため、コンポーネントCSSは共通で動く。 */ :root { --bg: #f4f6f9; --bg-sunken: #eceff4; --surface: #ffffff; --surface-2: #f7f9fb; --text: #19202c; --text-2: #5d6a7e; --text-3: #8b96a8; --border: #dfe4ec; --border-strong: #c6cedb; --accent: #2f5bd0; --accent-ink: #1f3f97; --accent-soft: #e8eefc; --amber: #b5780c; --amber-soft: #fdf0d5; --green: #1f7a52; --green-soft: #e4f3ea; --red: #b3372c; --red-soft: #fbe7e3; --violet: #6f47a8; --violet-soft: #f0e9f8; --teal: #1b6f78; --teal-soft: #e0f1f2; --radius-lg: 14px; --radius: 10px; --radius-sm: 7px; --button-radius: 8px; --shadow-sm: 0 1px 2px rgba(21, 30, 45, .06); --shadow: 0 4px 14px -6px rgba(21, 30, 45, .18); --shadow-lg: 0 18px 40px -18px rgba(21, 30, 45, .34); --font: system-ui, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; --fs-base: 13px; --fs-sm: 12px; --fs-xs: 11px; --fs-lead: 14px; --fs-title: 15px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; --tap: 34px; } body[data-theme="guest"] { --bg: #fbf6f0; --bg-sunken: #f4ece2; --surface: #ffffff; --surface-2: #fdf8f3; --text: #2b2420; --text-2: #7c6c5c; --text-3: #a2917e; --border: #ece0d2; --border-strong: #dcc9b4; --accent: #e2662a; --accent-ink: #a34a1c; --accent-soft: #fbe9dc; --radius-lg: 18px; --radius: 14px; --radius-sm: 10px; --button-radius: 12px; --fs-base: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-lead: 14.5px; --fs-title: 16px; /* スマホでの誤タップを防ぐため、予約者画面のみタップ領域を大きく取る。 */ --tap: 46px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; } /* ---------- 見出し・テキスト ---------- */ .eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; } .muted { color: var(--text-2); } .hint { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; } .num { font-variant-numeric: tabular-nums; } /* ---------- カード・ゾーニング ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-pad { padding: var(--sp-4) var(--sp-5); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); } .card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-title); font-weight: 800; } .card-body { padding: var(--sp-4) var(--sp-5); } /* 情報量の多いコンソール画面を意味のまとまりで区切るためのゾーン見出し。 */ .zone { margin-top: var(--sp-6); } .zone:first-child { margin-top: 0; } .zone-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); } .zone-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 800; } .zone-head .zone-note { font-size: var(--fs-xs); color: var(--text-2); } /* ---------- 指標タイル ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); } .stat { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-sm); } .stat .stat-label { font-size: var(--fs-xs); color: var(--text-2); font-weight: 700; white-space: nowrap; } .stat .stat-value { font-size: 22px; font-weight: 800; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; } .stat .stat-sub { font-size: var(--fs-xs); color: var(--text-3); } .stat.is-attention { border-left-color: var(--amber); } .stat.is-attention .stat-value { color: var(--amber); } .stat.is-alert { border-left-color: var(--red); } .stat.is-alert .stat-value { color: var(--red); } .stat.is-accent { border-left-color: var(--accent); } /* ---------- バッジ ---------- */ .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--bg-sunken); color: var(--text-2); } .badge.received, .badge.warn, .badge.unfixed { background: var(--amber-soft); color: var(--amber); } .badge.approved, .badge.changed, .badge.info, .badge.pending { background: var(--accent-soft); color: var(--accent-ink); } .badge.checked_in { background: var(--teal-soft); color: var(--teal); } .badge.checked_out, .badge.ok, .badge.active, .badge.fixed { background: var(--green-soft); color: var(--green); } .badge.rejected, .badge.cancelled, .badge.danger, .badge.inactive { background: var(--red-soft); color: var(--red); } .badge.trial { background: var(--violet-soft); color: var(--violet); } /* ステータス毎の色を、バッジ以外（行の左線・見出しのドット）でも使い回す。 */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--text-3); flex-shrink: 0; } .status-dot.received { background: var(--amber); } .status-dot.approved, .status-dot.changed { background: var(--accent); } .status-dot.checked_in { background: var(--teal); } .status-dot.checked_out { background: var(--green); } .status-dot.rejected, .status-dot.cancelled { background: var(--red); } /* ---------- ボタン ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--button-radius); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background .12s ease, border-color .12s ease, opacity .12s ease; } .btn:hover { background: var(--surface-2); } .btn:active { transform: translateY(.5px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); } .btn.danger { border-color: var(--red); color: var(--red); background: var(--surface); } .btn.danger:hover { background: var(--red-soft); } .btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); } .btn.ghost:hover { background: var(--bg-sunken); } .btn.sm { min-height: 28px; padding: 0 10px; font-size: var(--fs-xs); } .btn.block { width: 100%; } /* ---------- フォーム ---------- */ .input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="number"], input[type="password"], select, textarea { font-family: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; min-height: var(--tap); } textarea { padding: 9px 10px; line-height: 1.6; resize: vertical; min-height: 0; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* iOS Safariは16px未満の入力欄にフォーカスすると画面を勝手に拡大するため、スマホ前提の予約者画面では入力欄だけ16pxを死守する。 */ body[data-theme="guest"] input, body[data-theme="guest"] select, body[data-theme="guest"] textarea { font-size: 16px; } input[type="checkbox"] { min-height: 0; width: auto; accent-color: var(--accent); } .field { display: flex; flex-direction: column; gap: 5px; } .field > .field-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); } /* 横並びフォームはカラム幅に対して均等配置する（要件）。 */ .row-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); align-items: end; } .row-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); } .row-form input:not([type="checkbox"]), .row-form select { width: 100%; } .row-form button { justify-self: start; } /* ---------- テーブル ---------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table th { text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); white-space: nowrap; padding: 7px 10px; border-bottom: 1.5px solid var(--border); background: var(--surface-2); } .table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--surface-2); } .table .right { text-align: right; } .table .nowrap { white-space: nowrap; } /* ---------- 定義リスト（詳細画面の項目表示） ---------- */ .rows { display: flex; flex-direction: column; } .rows .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); } .rows .row:last-child { border-bottom: none; } .rows .lab { color: var(--text-2); white-space: nowrap; } .rows .val { text-align: right; word-break: break-word; } /* ---------- マイルストーン（縦タイムライン） ---------- */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 var(--sp-4) 26px; min-height: 22px; } .timeline li:last-child { padding-bottom: 0; } /* ○ 部分。完了済みは塗り、現在地はリング、未到達は薄い輪郭。 */ .timeline li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 999px; background: var(--surface); border: 2px solid var(--border-strong); box-sizing: border-box; } /* ─ 部分（次のマイルストーンへ伸びる縦線）。 */ .timeline li::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; width: 2px; background: var(--border); } .timeline li:last-child::after { display: none; } .timeline li.is-done::before { background: var(--green); border-color: var(--green); } .timeline li.is-done::after { background: var(--green); opacity: .35; } .timeline li.is-current::before { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .timeline li.is-blocked::before { background: var(--red); border-color: var(--red); } .timeline li.is-skipped::before { border-style: dashed; } .timeline .ms-title { font-size: var(--fs-sm); font-weight: 700; } .timeline li.is-todo .ms-title { color: var(--text-3); font-weight: 600; } .timeline .ms-meta { font-size: var(--fs-xs); color: var(--text-2); } .timeline .ms-note { font-size: var(--fs-xs); color: var(--text-3); } /* ---------- 通知メッセージ ---------- */ .msg { padding: 9px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.6; margin-top: var(--sp-2); } .msg.error { background: var(--red-soft); color: var(--red); } .msg.success { background: var(--green-soft); color: var(--green); } .msg.info { background: var(--accent-soft); color: var(--accent-ink); } /* ---------- コンソール共通レイアウト ---------- */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .app-header .brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 900; font-size: var(--fs-title); } .app-header nav { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); } .app-header nav a { color: var(--text-2); text-decoration: none; } .app-header nav a:hover { color: var(--text); } .app-main { max-width: 1180px; margin: 0 auto; padding: var(--sp-5) 24px 64px; } .login-gate { max-width: 420px; margin: 90px auto; text-align: center; } /* ---------- 予約者画面（スマホ前提）レイアウト ---------- */ body[data-theme="guest"] { line-height: 1.7; } .guest-wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; } .guest-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .guest-title { font-size: 20px; font-weight: 800; margin: 10px 0 4px; line-height: 1.45; } .guest-lead { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); } /* スマホでは主要CTAを画面下に固定し、長いフォームでも常に押せるようにする。 */ .sticky-cta { position: sticky; bottom: 0; padding: var(--sp-3) 0 max(var(--sp-3), env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 72%, transparent); } @media (max-width: 420px) { .guest-wrap { padding: 16px 12px 32px; } .card-body, .card-pad { padding: var(--sp-4); } }