/* ログイン画面。**小中高が使う。**
 *
 * 迷わせない。入力は2つだけ。文字は大きめ。
 * 携帯（縦持ち）が主な想定なので、横幅を決め打ちしない。
 */
:root {
  --lg-bg: #0f1420; --lg-card: #182030; --lg-line: #2a3550;
  --lg-ink: #e8edf7; --lg-dim: #93a2bd; --lg-key: #ffd966; --lg-ng: #ff9a9a;
}
* { box-sizing: border-box; }
body.lg {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  padding: 20px; background: var(--lg-bg); color: var(--lg-ink);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  font-feature-settings: "palt";
}
.lg-box {
  width: 100%; max-width: 380px; background: var(--lg-card);
  border: 1px solid var(--lg-line); border-radius: 14px; padding: 24px 20px 20px;
}
.lg-box h1 { font-size: 1.25rem; margin: 0 0 6px; }
.lg-sub { color: var(--lg-dim); font-size: .9rem; margin: 0 0 20px; }
label { display: block; font-size: .85rem; margin: 14px 0 6px; }
input {
  width: 100%; padding: 13px 12px; font-size: 1.05rem;   /* 16px 未満だと
    iPhone が勝手に拡大する。**打ちにくくなるので下げない。** */
  background: #0b101a; color: var(--lg-ink);
  border: 1px solid var(--lg-line); border-radius: 9px;
}
input:focus { outline: 2px solid var(--lg-key); outline-offset: 1px; }
.lg-pw { display: flex; gap: 8px; }
.lg-pw input { flex: 1; }
.lg-eye {
  flex: 0 0 auto; padding: 0 14px; font-size: .85rem;
  background: #0b101a; color: var(--lg-dim);
  border: 1px solid var(--lg-line); border-radius: 9px; cursor: pointer;
}
.lg-go {
  width: 100%; margin-top: 22px; padding: 14px; font-size: 1.05rem;
  font-weight: 700; color: #12203a; background: var(--lg-key);
  border: 0; border-radius: 10px; cursor: pointer;
}
.lg-go[disabled] { opacity: .6; cursor: default; }
.lg-msg { min-height: 1.3em; margin: 12px 0 0; font-size: .9rem; color: var(--lg-ng); }
.lg-note { color: var(--lg-dim); font-size: .82rem; margin: 20px 0 0;
           border-top: 1px solid var(--lg-line); padding-top: 14px; }

/* 共用の入口（2026-09-19）
 * **合言葉を配っていないのに、合言葉を聞いていた。**
 * 画面に出す以上これは秘密ではない。隠さずに出す。
 * 小さい子はローマ字が打てないので、押すだけで入れるようにする。 */
/* **背景を決めたら、文字の色も決める。**（2026-09-22）
 * 明るい背景（#eef6fb）だけを指定して文字色を書いていなかったため、
 * 暗い配色の端末では白い文字が白に近い背景に出て、**読めなかった。**
 * 利用者の画面で、この枠だけが背景に溶けていた。 */
.lg-open{margin:22px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--lg-soft,#eef6fb);border:1px solid var(--lg-line,#cfe2ee);
  color:#12333f}
.lg-open-t{margin:0 0 10px;font-weight:700;font-size:15px}
.lg-open-d{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  margin:0 0 14px;font-size:15px}
.lg-open-d dt{color:#3e5866;font-size:13px;align-self:center}
.lg-open-d dd{margin:0;font-weight:800;letter-spacing:.06em;color:#12333f;
  font-family:ui-monospace,Menlo,monospace}
.lg-try{width:100%;padding:14px;border:0;border-radius:10px;
  background:var(--lg-go,#1b7fa8);color:#fff;font-size:17px;font-weight:800;
  cursor:pointer}
.lg-try:hover{filter:brightness(1.07)}