/* ログイン画面
   2026-10-04：左右2分割をやめ、中央1枚にした。紺のブランド面・特徴の札・参加の3ステップは外した。
   旧版は _archive/login_20261004_中央1枚化前/ */
.login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:48px 16px}
.login .lg-wrap{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center}
.login .lg-logo{margin-bottom:24px}
.login .lg-logo .logo{font-size:22px}
.login .lg-card{width:100%;background:#ffffff;border:1px solid var(--line);border-radius:8px;padding:32px}
.login .fh{font-size:22px;font-weight:700;line-height:1.4;margin-bottom:24px;text-align:center}
.login form{display:flex;flex-direction:column;width:100%}
.login label{font-size:14px;font-weight:700;color:#3a4157;margin-bottom:8px}
.login .field{height:52px;border:1px solid #c9c2b3;border-radius:6px;background:#ffffff;
  display:flex;align-items:center;gap:10px;padding:0 14px;margin-bottom:20px;transition:border-color .12s,box-shadow .12s}
.login .field input,.login .field select{border:none;outline:none;font-family:var(--sans);font-size:16px;flex:1;min-width:0;height:100%;color:var(--ink);background:none}
.login .field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(193,145,58,.15)}
.login .fid-name{margin-left:auto;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}

/* 職員はプルダウンで選ぶ（2026-10-04 名前カードから変更）。矢印は select 自体の背景に描く */
.login .field.sel{padding:0}
.login .field select{appearance:none;-webkit-appearance:none;padding:0 40px 0 14px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636b7d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.login .who-hint{margin:-12px 0 20px;font-size:13px;color:var(--muted);line-height:1.7}

.login .pw-toggle{flex:none;border:none;background:none;cursor:pointer;color:#9aa0af;display:grid;place-items:center;
  width:44px;height:44px;margin-right:-10px;border-radius:6px;transition:color .12s,background .12s}
.login .pw-toggle:hover{color:#5b6577;background:rgba(0,0,0,.04)}
.login .pw-toggle svg{width:20px;height:20px}
.login .pw-toggle .ic-hide{display:none}
.login .pw-toggle.on .ic-show{display:none}
.login .pw-toggle.on .ic-hide{display:block}

.login .row{display:flex;align-items:center;justify-content:space-between;margin:-8px 0 16px;flex-wrap:wrap;column-gap:12px}
.login .remember{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#4a5162;cursor:pointer;margin:0;min-height:44px}
.login .remember input{width:18px;height:18px;accent-color:var(--gold)}
.login .submit{height:52px;font-size:16px;width:100%}

.login .lg-help{margin-top:24px;font-size:13px;color:var(--muted);text-align:center;line-height:1.8}
.login .lg-help b{color:#26406e;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.login .lg-foot{margin-top:8px;font-size:12px;color:var(--muted)}

@media (max-width:520px){
  .login{align-items:flex-start;padding:32px 16px}
  .login .lg-card{padding:24px 20px}
}

/* ログイン画面のお知らせ（2026-08-16）
   運営 console.html が「152施設のログイン画面にお知らせを出しています」と書いているのに
   受け皿が無く、中止の日は利用者を集め終えてからログインして初めて中止を知る状態だった。
   ⚠ 面を赤で塗るのは「配信の中止・変更」のときだけ（tune.css 冒頭の規律）。
      ここに出すのは中止のお知らせなので、帯と同じ赤でよい。
   ⚠ HTML は build/gen_common.py の生成物（LOGINNOTE:START〜END）。件名は OPSBAR_HEAD から。 */
.login .lgnote{display:flex;align-items:flex-start;gap:12px;margin:0 0 24px;padding:14px 16px;
  border-radius:8px;background:var(--live);color:#ffffff}
.login .lgn-ic{flex:none;width:24px;height:24px;display:grid;place-items:center}
.login .lgn-ic svg{width:22px;height:22px}
.login .lgn-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.login .lgn-t b{font-size:16px;font-weight:700;line-height:1.5}
.login .lgn-t em{font-style:normal;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.6}

/* 実装側：ログインに失敗したときの文（モックに無い） */
.login .lg-err{margin:0 0 20px;padding:12px 14px;border:1px solid #eecfc4;border-radius:6px;background:#fbe9e4;color:#a63a22;font-size:14px;font-weight:700;line-height:1.6}