/* Guest 站样式（静态 SSR・手写 CSS・系统字体のみ／外部资源ゼロ＝弱网前提） * * 配色トークン（法定名簿の記入用紙という性格上、彩度は落として「冷静・信頼」寄せ）: * --bg / --surface / --surface-2 背景の 3 階層。カード > 入れ子ブロックの従属関係を「面」で示す * --accent / --on-accent 主操作の塗り。--accent-weak / --accent-ink はその上に載せる弱面と文字 * --danger / --req-* エラー赤と「必須」バッジ赤を分離。同色だと必須表示を誤読するため * --field-bg 入力欄だけカードより一段沈める（記入位置を迷わせない） * 暗色は prefers-color-scheme で同名トークンを差し替えるだけ。個別規則に色を書かない。 * ブレークポイントは 40rem 一本（縦 1 カラムのスマホ既定 → それ以上で 2 カラム化）。 */ :root { color-scheme: light dark; /* date ピッカー/スクロールバー等のネイティブ UI を追随させる */ --bg: #eef1f5; --surface: #ffffff; --surface-2: #f5f8fa; --field-bg: #fbfcfd; --text: #17202a; --text-muted: #5b6774; --border: #d7dee6; --border-strong: #b3bfcc; --accent: #17567f; --on-accent: #ffffff; --accent-weak: #e6f0f7; --accent-ink: #12496e; --danger: #b32121; --danger-weak: #fdecec; --req-bg: #b32121; --req-ink: #ffffff; --warn-bg: #fff6e0; --warn-ink: #7a5200; --ok-ink: #1c6b3f; --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 2px 10px rgba(16, 32, 48, .05); } @media (prefers-color-scheme: dark) { :root { --bg: #11161b; --surface: #1a2027; --surface-2: #212a33; --field-bg: #161c22; --text: #e7edf3; --text-muted: #a4b1be; --border: #303b46; --border-strong: #47555f; --accent: #4fa3d8; --on-accent: #06131d; --accent-weak: #17303f; --accent-ink: #9ecdf0; --danger: #ff9d95; --danger-weak: #3a1d1c; --req-bg: #7f2222; --req-ink: #ffdcd8; --warn-bg: #362c14; --warn-ink: #f0c96a; --ok-ink: #6fd39b; --shadow: none; } } /* ---- 書体 ---- * CJK は同じ漢字でも言語ごとに字形が違う（例：直・者・収・骨）。system-ui は「OS の言語」に * 従うので、中国語 OS で日本語ページを開くと日本語の漢字に簡体字の字形が当たり * 「日本語の画面に中国語が混ざって見える」。そのため CJK だけ で自国書体を先頭に置く。 * ラテン系（en/vi）は system-ui で問題ない。ベトナム語の声調記号も system-ui が持っている。 */ :root { --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html:lang(ja) { --font: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif; } html:lang(zh-Hans) { --font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; } html:lang(zh-Hant) { --font: "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; } html:lang(ko) { --font: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; } /* ---- 基盤 ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0 auto; padding: 1rem 1rem 3rem; max-width: 42rem; background: var(--bg); color: var(--text); font-family: var(--font); /* ベトナム語の声調記号（Ế/ộ 等）が上下で欠けないよう行間を広めに取る */ line-height: 1.75; -webkit-text-size-adjust: 100%; } /* JS が hidden で表示制御するため、下の display 指定に負けないよう固定 */ [hidden] { display: none !important; } h1 { position: relative; margin: .5rem 0 1.25rem; padding-bottom: .7rem; font-size: 1.3rem; line-height: 1.45; } h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; background: var(--accent); border-radius: 2px; } h1:focus { outline: none; } /* FocusOnNavigate の自動フォーカス（見た目の対象外） */ a { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---- 言語切替 ---- */ .lang-switch { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .lang-switch a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .8125rem; text-decoration: none; } .lang-switch a.lang-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; } /* ---- カード（滞在期間・滞在者） ---- */ .stay, .guest-card { min-inline-size: 0; /* fieldset 既定の min-content 幅で横溢れするのを防ぐ */ margin: 0 0 1rem; padding: 1rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .guest-card > legend { padding: .15rem .7rem; background: var(--accent-weak); border: 1px solid var(--border); border-radius: 999px; color: var(--accent-ink); font-size: .9rem; font-weight: 700; } /* 代表者カードは同行者と同構造なので、左の帯だけで主従を示す */ .guest-card[data-rep="true"] { border-left: 3px solid var(--accent); } /* 「日本国内住所あり/なし」の回答に従属する領域 */ .branch { margin-top: .75rem; padding-left: .75rem; border-left: 2px solid var(--border); } .address-block, .passport-block, .ocr-block { margin: .9rem 0; padding: .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .address-block > :last-child, .passport-block > :last-child, .ocr-block > :last-child { margin-bottom: 0; } /* 代表者からの継承チェック＝入力を省く近道。周囲の入力欄と役割が違うので面で分ける */ .field.inherit { margin: .9rem 0; padding: 0 .7rem; background: var(--accent-weak); border: 1px solid var(--border); border-radius: 8px; } /* ---- フィールド ---- */ .field { margin-bottom: .9rem; } .field > label, .label { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: 700; } /* **type を列挙する書き方は新しい入力欄を足すたびに漏れる。** `tel` / `email` を足したとき、ここに書き忘れて 2 つだけ既定幅（約 180px）に落ちた。 `input:not([type=radio]):not([type=checkbox]):not([type=file])` にしないのは、 除外側の列挙も同じだけ漏れるため——追加時にこの 1 行を見る運用にする */ .field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=date], .field select, .field textarea { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .65rem; background: var(--field-bg); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font: inherit; font-size: 1rem; /* 16px 未満だと iOS がフォーカス時にページを拡大する */ line-height: 1.5; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); } .field textarea { min-height: 5.5rem; resize: vertical; } input[type=radio], input[type=checkbox] { width: 1.25rem; height: 1.25rem; margin: 0 .5rem 0 0; accent-color: var(--accent); } /* はい/いいえ はタップ面を持つチップに（誤タップと押しづらさの両方を消す） */ .field label.radio { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: .5rem; padding: 0 .8rem; background: var(--field-bg); border: 1px solid var(--border-strong); border-radius: 8px; font-weight: 500; } .field label.checkbox { display: flex; align-items: center; min-height: 2.75rem; margin-bottom: 0; font-weight: 500; } /* 郵便番号 + 住所検索。長い訳語（vi/en）では折り返して段落ちさせる */ .input-row { display: flex; flex-wrap: wrap; gap: .5rem; } .input-row input[type=text] { flex: 1 1 8rem; min-width: 0; } .input-row .btn-sub { flex: 0 0 auto; } .passport-block input[type=file] { display: block; width: 100%; margin: .6rem 0; padding: .6rem; background: var(--field-bg); border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text); font-size: .9rem; } input[type=file]::file-selector-button { margin-right: .6rem; padding: .45rem .8rem; background: var(--accent-weak); border: 1px solid var(--accent); border-radius: 6px; color: var(--accent-ink); font: inherit; font-size: .875rem; cursor: pointer; } /* ---- バッジ（必須/任意） ---- */ .badge { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border: 1px solid transparent; border-radius: 4px; font-size: .7rem; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: middle; } .badge-required { background: var(--req-bg); color: var(--req-ink); } .badge-optional { border-color: var(--border-strong); color: var(--text-muted); font-weight: 500; } /* ---- 状態表示 ---- */ .err { margin: .35rem 0 0; padding: .35rem .6rem; background: var(--danger-weak); border-left: 3px solid var(--danger); border-radius: 0 6px 6px 0; color: var(--danger); font-size: .9rem; } .msg { margin: .3rem 0; color: var(--text-muted); font-size: .875rem; } .notice { margin: 1rem 0; padding: .8rem .9rem; background: var(--accent-weak); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; color: var(--text); } /* 添付完了の成功フィードバック（.msg の弱化表示と区別する） */ .msg-ok { margin: .5rem 0; color: var(--ok-ink); font-size: .9rem; font-weight: 700; } .msg-ok::before { content: "✓"; margin-right: .35rem; } .noscript { margin: 1rem 0; padding: .8rem .9rem; background: var(--warn-bg); border-left: 4px solid var(--warn-ink); border-radius: 0 8px 8px 0; color: var(--warn-ink); font-weight: 600; } /* ---- ボタン ---- */ button { min-height: 2.75rem; padding: .6rem 1.1rem; border: 1px solid transparent; border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4; cursor: pointer; transition: background-color .12s, border-color .12s; } button:disabled { opacity: .5; cursor: not-allowed; } /* 「戻る」と「登録する」を縦に離して並べ、誤タップを防ぐ */ .actions { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; } /* 主操作（確認へ / 登録する）。塗りはこの 2 つだけに限定して視線を集める */ .actions button[value="confirm"], .actions button[value="submit"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; } /* 「戻る」は塗りを外して主操作と取り違えないようにする */ .actions button[value="input"] { background: transparent; border-color: var(--border-strong); color: var(--text-muted); } /* 副操作（住所検索 / OCR / リンクコピー） */ .btn-sub, #copy-link { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-ink); font-size: .9rem; font-weight: 600; } .ocr-block .btn-sub, #copy-link { display: block; width: 100%; margin-top: .5rem; } #add-companion { display: block; width: 100%; margin: .5rem 0 1.5rem; background: transparent; border: 1px dashed var(--border-strong); color: var(--accent); font-weight: 600; } /* 削除は破壊操作。右端に小さく置き、主操作と取り違えないようにする */ .btn-remove { display: block; margin: 0 0 .75rem auto; padding: .4rem .8rem; background: transparent; border-color: var(--border-strong); color: var(--danger); font-size: .85rem; } /* ---- 確認態 ---- */ .confirm-guest > h2 { margin: 1.5rem 0 .5rem; padding-bottom: .4rem; border-bottom: 2px solid var(--accent); font-size: 1.05rem; } .confirm { margin: 0 0 1rem; padding: .25rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .confirm dt { margin-top: .75rem; color: var(--text-muted); font-size: .8rem; font-weight: 600; } .confirm dd { margin: 0 0 .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; } /* 住所（textarea）の改行を活かす。入力どおりに見えないと客人が確認できない。 dd 全体に掛けると Razor のソース改行まで出てしまうので、この項目だけに限定する */ .confirm dd.multiline { white-space: pre-line; } .confirm dd:last-child { border-bottom: 0; } /* QR は暗色テーマでも必ず白地・黒モジュールのまま出す（反転すると読めない端末がある）。 スクリーンショットから復元する用途なので、拡大しても粗くならないよう SVG をそのまま伸ばす */ .qr { width: 12rem; margin: .75rem 0; padding: .6rem; background: #fff; border-radius: 8px; } .qr svg { display: block; width: 100%; height: auto; } /* ---- 完了態：変更用リンク（客人が自分で保存する唯一の手掛かり） ---- */ .edit-link { margin: 1rem 0 .5rem; padding: .8rem .9rem; background: var(--surface-2); border: 2px dashed var(--accent); border-radius: 8px; font-size: .95rem; } .edit-link a { overflow-wrap: anywhere; word-break: break-all; } /* ---- 40rem 以上（PC・タブレット） ---- */ @media (min-width: 40rem) { body { padding: 1.5rem 1.5rem 4rem; } h1 { font-size: 1.5rem; } .stay { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .stay .field { margin-bottom: 0; } .actions { flex-direction: row; justify-content: flex-end; gap: 1rem; } .confirm { display: grid; grid-template-columns: 13rem 1fr; column-gap: 1rem; padding: .9rem; } /* 見出しと値は同じ箱にする：片方だけ margin を持つと grid の行の中で 下罫線の高さがずれる。行高はストレッチで揃うので、余白を揃えれば罫線も揃う。 line-height を実寸で合わせて、字号差（.8rem / 1rem）による行の食い違いも消す */ .confirm dt, .confirm dd { margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--border); line-height: 1.75rem; } .confirm dt:last-of-type, .confirm dd:last-of-type { border-bottom: 0; } #add-companion, #copy-link { width: auto; } }