:root { color-scheme: light; font-family: system-ui, sans-serif; color: #243044; background: #f3f5f8; }
body { margin: 0; padding: 24px 16px; }
main { max-width: 520px; margin: 7vh auto; padding: 32px; background: white; border-radius: 16px; }
h1 { font-size: 1.6rem; line-height: 1.5; }
p { line-height: 1.9; }
label { display: block; margin: 24px 0 8px; font-weight: 600; }
input[type=email] { box-sizing: border-box; width: 100%; padding: 14px; border: 1px solid #778397; border-radius: 6px; font-size: 1rem; }
/* ブランド色は公式サイトの案C（深紅 #8b1e1e）。hover は同サイトのボタンと同じ #731919。 */
button { width: 100%; padding: 16px; margin: 20px 0; border: 0; border-radius: 6px; background: #8b1e1e; color: white; font: inherit; font-weight: 600; cursor: pointer; transition: background .2s; }
button:hover { background: #731919; }
button:disabled { background: #68758b; cursor: default; }
/* 必須項目が揃うまでボタンを控えめに見せる（Cloud Four の OTP 入力の作法）。
   無効化はしない — 押せば「6桁の数字を入力してください」等のブラウザ標準の案内が出る方が親切。 */
form:invalid button[type=submit] { opacity: .55; }
a { color: #8b1e1e; line-height: 1.8; }
:focus-visible { outline: 3px solid #e58200; outline-offset: 4px; }

/* ロゴ（logo-lockup-dark・1275×229）。自前で配信する — CSP が default-src 'none' で外部画像を止めるため。 */
.logo { display: block; width: min(230px, 62%); height: auto; margin: 0 0 22px; }

/* 6桁コード。入力欄は1つだけで、6マスに見せる。
   欄を6個に分けると iOS のワンタイムコード自動入力と6桁のペーストが効かなくなる。
   等幅フォントの 1ch を基準に letter-spacing でマス幅に合わせる。JS 不要。 */
/* overflow: hidden は、右に広げた入力欄の余白（6桁入力後のカーソル）を枠の外で見せないため。 */
.code-cells { --w: 3rem; --gap: .6rem; --h: 3.75rem; position: relative; display: grid; grid-template-columns: repeat(6, var(--w)); gap: var(--gap); width: max-content; margin: 8px 0 4px;
  /* 入力欄を枠より右へ広げているので、枠が「スクロールできる箱」になると 6桁目の
     カーソルを見せようとして枠自体が左へ動き 1桁目が欠ける（Mac Chrome で 24.5px 観測 2026-09-19）。
     clip はスクロール箱にならないため動かない。clip 非対応の古い Safari は hidden に落ち、
     その場合は code-cells.js が枠のスクロールを戻す。 */
  overflow: hidden; overflow: clip; }
.code-cells span { height: var(--h); border: 1.5px solid #c9c2bf; border-radius: 6px; background: #fff; }
.code-cells:focus-within span { border-color: #8b1e1e; }
/* 幅は枠より1マス分広くする。letter-spacing は最後の桁の後ろにも付くため、文字列の幅が
   枠の合計幅を超え、カーソルが末尾にある入力欄が左へスクロールして1桁目が欠ける（2026-09-18 実測）。 */
.code-cells input { position: absolute; top: 0; left: 0; width: calc(100% + 3 * (var(--w) + var(--gap))); height: 100%; box-sizing: border-box; padding: 0; border: 0; background: transparent; outline: none;
  font: 700 2rem/var(--h) ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: calc(var(--w) + var(--gap) - 1ch); text-indent: calc((var(--w) - 1ch) / 2);
  color: #1c1a19; caret-color: #8b1e1e; }
.code-cells:focus-within { outline: 3px solid #e58200; outline-offset: 6px; border-radius: 6px; }

@media (max-width: 480px) {
  main { padding: 24px 18px; }
  .code-cells { --w: 2.35rem; --gap: .4rem; --h: 3.25rem; }
  .code-cells input { font-size: 1.7rem; }
}
@media (max-width: 360px) {
  .code-cells { --w: 2rem; --gap: .3rem; --h: 3rem; }
  .code-cells input { font-size: 1.5rem; }
}