@charset "UTF-8";
/*=============================================
*
* 認証前モーダル(調査隊員登録の内容確認)
*
* ゲーム側のモーダル(game-modal)とは意図的に分けている。
* 登録確認の見た目を調整してもゲーム内のモーダルに波及させないため。
* 共通化したくなった場合も、まず両者を見比べてから判断すること。
*
=============================================*/
.auth-modal {
  align-items: center;
  background-color: var(--color-modal-overlay);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.6rem;
  position: fixed;
  z-index: 100;
}

.auth-modal__box {
  background-color: var(--color-button);
  color: var(--color-hud-text-light);
  max-height: calc(100vh - 3.2rem);
  /* iOS Safari/Chrome(WebKitベース)は100vhをアドレスバー等が引っ込んだ最大表示高さで
     計算するため、実機ではmax-heightが実際に見える範囲より大きくなり、
     画面中央寄せのモーダルが上下ともはみ出して見えてしまう。100dvhで上書きする。 */
  max-height: calc(100dvh - 3.2rem);
  max-width: 29.9rem;
  overflow-y: auto;
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  width: 100%;
}

.auth-modal__title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.auth-modal__lead {
  font-size: 1.7rem;
  line-height: 1.5;
  margin: 1.6rem 0 0;
}

.auth-modal__body {
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 2rem 0 0;
  white-space: pre-line;
}

.auth-modal__actions {
  align-items: center;
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  margin-top: 2.4rem;
}

.auth-modal__btn {
  appearance: none;
  background: var(--color-modal-send-btn);
  border: none;
  color: var(--color-white-text);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 500;
  padding: 0.2rem 0 0.4rem;
}

.auth-modal__btn.-cancel {
  background: none;
  color: var(--color-modal-cancel-btn);
  font-size: 1.6rem;
  width: 12rem;
}

.auth-modal__btn.-confirm {
  color: #006C86;
  width: 11.6rem;
}