/* ログイン画面だけで使う。0.6 の画面は hms.css を使う。 */
:root {
  --navy: #14304f;
  --navy-soft: #1d4470;
  --blue: #1f6fd0;
  --blue-dark: #17579f;
  --blue-pale: #eaf2fc;
  --bg: #f1f4f8;
  --panel: #ffffff;
  --ink: #16202e;
  --ink-2: #435268;
  --muted: #7a8899;
  --line: #dde4ec;
  --line-soft: #eef2f6;
  --good: #1b7a48;
  --good-bg: #e6f4ec;
  --warn: #8a5a05;
  --warn-bg: #fdf3e2;
  --danger: #b03a32;
  --danger-bg: #fbecea;
  --r: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.input, select.input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  height: 36px;
  padding: 0 10px;
}
.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--r);
  height: 36px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
}
.login-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  width: min(380px, 100%);
}
.input.wide { width: 300px; }
.input:focus, select.input:focus, .btn:focus, .chip:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.sub { color: var(--ink-2); background: #fff; border-color: var(--line); font-weight: 400; }
.btn.sub:hover { background: var(--line-soft); }
.btn.danger { color: var(--danger); background: #fff; border-color: #e6c6c2; font-weight: 400; }
.btn.small { height: 30px; padding: 0 10px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.fieldset { margin-bottom: 16px; }
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.field.full { grid-column: 1 / -1; }
.field.wide { grid-column: span 2; }
/* エラー欄は出番があるまで隠す（指定が無いと空のまま帯が見えてしまう） */
.hidden { display: none !important; }
.msg { border-radius: var(--r); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.msg.ok { background: var(--good-bg); color: var(--good); }
.msg.warn { background: var(--warn-bg); color: var(--warn); }
.msg.error { background: var(--danger-bg); color: var(--danger); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.login-logo { width: 32px; height: 32px; border-radius: 7px; flex: none; }
.login-box h1 { font-size: 20px; margin: 0; }
.login-box p.note { color: var(--muted); font-size: 12px; margin: 0 0 20px; }
.login-box .field { margin-bottom: 12px; }
/* 入力欄はボタンと同じ幅にそろえる（幅の指定が無いと既定の幅のまま左に寄る） */
.login-box .field input { width: 100%; height: 40px; }
.login-box .btn { width: 100%; height: 40px; margin-top: 4px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }