/* * 認証まわり（ログイン・会員登録・パスワード再設定・配信停止）の画面。 * auth/layout.html.twig から読む。色と余白は tokens.css の値だけを使う。 * * 以前この領域は .login-container（app.css・admin 用の --adm-* トークン）と * .register-container / .unsubscribe-container（**CSS の定義そのものが無かった**）に * 分かれていた。ここに集約して公開サイトのデザインに揃える。 * * フォーム部品は components.css の .bm-form / .bm-field / .bm-field-input / * .bm-btn を使うので、ここでは定義しない（入力欄の font-size:16px による * iOS の自動ズーム回避と、ボタンのタップ領域もそちらで担保される）。 */ /* 画面の高さが足りるときはフッターを最下部に張り付かせる。 * * 色と字面をここで指定し直しているのは、パスキーと CSRF の Stimulus コントローラのために * importmap('app') が必要で、その app.js が app.css を読み込むため。app.css は * のこのファイルより **後ろ** に注入され、body の背景・文字色・フォント（admin 用の * Hiragino）と `a { color: inherit }` を後勝ちで上書きしてしまう。 * 読み込み順には頼れないので、`.bm-auth` を前置して詳細度で勝たせる。 */ .bm-auth { display: flex; flex-direction: column; min-height: 100vh; background: var(--bm-surface-1); color: var(--bm-body); font-family: var(--bm-font-ja); font-size: 14px; line-height: 2.0; } .bm-auth a { color: var(--bm-purple); } .bm-auth a:hover { color: var(--bm-magenta); } /* 公開ページと同じく PC は本文 15px（base.css と同じ切り替え点） */ @media (min-width: 1120px) { .bm-auth { font-size: 15px; } } /* -------------------------------------------------------------------------- ヘッダー（ロゴ＋言語切替のみ） -------------------------------------------------------------------------- */ .bm-auth-header { border-bottom: 1px solid var(--bm-line); background: var(--bm-surface); } .bm-auth-header .bm-logo img { height: 26px; } .bm-auth-header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-space-2); max-width: var(--bm-container); margin: 0 auto; padding: 14px 16px; } /* -------------------------------------------------------------------------- 本体 -------------------------------------------------------------------------- */ .bm-auth-main { flex: 1; width: 100%; max-width: 460px; /* 縦の短い端末で詰まらないよう上余白に下限を置く */ margin: max(24px, 6vh) auto var(--bm-space-5); padding: 0 16px; } .bm-auth-card { padding: 28px 24px; border: 1px solid var(--bm-line); border-radius: var(--bm-radius); background: var(--bm-surface); box-shadow: var(--bm-shadow-sm); } /* h1 の既定（SP 30px / PC 44px）はカードの中では大きすぎる */ .bm-auth-title { margin: 0 0 var(--bm-space-2); font-size: 20px; } .bm-auth-title:empty { display: none; } .bm-auth-lead { margin: 0 0 var(--bm-space-3); color: var(--bm-body); font-size: 13px; line-height: 1.9; } /* 送信ボタンはカード幅いっぱい。.bm-btn は inline-flex なので幅と中央寄せを足す。 アイコン付きのボタン（パスキー）でも文字とアイコンが中央に並ぶ */ .bm-auth-submit { justify-content: center; width: 100%; gap: 8px; } /* ソーシャルログインのボタンは の連続なので、既定では隙間が無く1枚の帯に見える （Google と LINE が繋がって見えるという指摘・2026-08-11）。 隣接セレクタで間だけを開ける。先頭のボタンに margin を付けないので、 上にあるパスキー欄や「または」との既存の間隔は変わらない */ .bm-auth-submit + .bm-auth-submit { margin-top: 12px; } /* アイコンは文字と一緒に中央へ寄る（.bm-auth-submit の gap:8px が効く）。 縦位置がベースラインでずれないよう、明示的にブロックにしておく */ .bm-auth-submit svg { flex: 0 0 auto; display: block; } /* カードの中に複数のフォームが並ぶ画面（確認コード入力＋再送）の間隔 */ .bm-auth-card .bm-form + .bm-form { margin-top: var(--bm-space-3); padding-top: var(--bm-space-3); border-top: 1px solid var(--bm-line); } /* -------------------------------------------------------------------------- 通知（エラー・フラッシュ） クラス名 .error / .flash は admin も含めたコードベース共通の慣習で、 多数のテストがこの選択子で「エラーが表示されたこと」を検証している。 独自の名前に変えずにここで見た目だけを合わせる。 app.css も同名を定義していて、そちらは importmap('app') 経由で後から 注入されるため読み込み順に頼れない。`.bm-auth-card` を前置して 詳細度で確実に勝たせる。背景色は .flash-success 等に任せたいので ここでは指定しない（指定すると成功の緑を潰してしまう）。 -------------------------------------------------------------------------- */ .bm-auth-card .error, .bm-auth-card .flash { margin: 0 0 var(--bm-space-2); padding: 10px 14px; border-radius: var(--bm-radius-sm); font-size: 13px; line-height: 1.8; } .bm-auth-card .error { background: #FDECF3; color: #B0165A; } /* -------------------------------------------------------------------------- パスキー（ログイン画面。パスワードより前に置く第一の選択肢） -------------------------------------------------------------------------- */ .bm-auth-passkey { margin-bottom: var(--bm-space-3); } /* 押せないことを色でも伝える（パスキーが1件も登録されていない間） */ .bm-auth-passkey .bm-btn:disabled, .bm-auth-passkey .bm-btn:disabled:hover { border-color: var(--bm-line); background: var(--bm-surface-3); color: var(--bm-muted); cursor: not-allowed; opacity: 1; } .bm-auth-or { display: flex; align-items: center; gap: 12px; margin: var(--bm-space-3) 0 0; color: var(--bm-muted); font-size: 12px; } .bm-auth-or::before, .bm-auth-or::after { flex: 1; height: 1px; background: var(--bm-line); content: ""; } /* 「前回使用」の印（設計 §6-2）。ボタンの色指定を上書きしないよう子要素に閉じる */ .bm-last-used { margin-left: .5em; padding: .1em .5em; border-radius: 999px; font-size: .75em; background: rgba(0, 0, 0, .08); } /* -------------------------------------------------------------------------- カードの下のリンク（パスワードをお忘れですか等） -------------------------------------------------------------------------- */ .bm-auth-links { display: flex; flex-direction: column; gap: 6px; margin-top: var(--bm-space-3); text-align: center; font-size: 13px; } /* -------------------------------------------------------------------------- フッター -------------------------------------------------------------------------- */ .bm-auth-footer { padding: var(--bm-space-3) 16px var(--bm-space-4); border-top: 1px solid var(--bm-line); color: var(--bm-muted); text-align: center; font-size: 12px; } .bm-auth-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 10px; } .bm-auth-footer-links a { color: var(--bm-body); } .bm-auth-footer-links a:hover { color: var(--bm-ink); } .bm-auth-copy { font-family: var(--bm-font-en); }