/* =====================================================
   Auth UI 共通スタイル（ログイン / 新規登録 / verify / profile）
   ===================================================== */

:root{
  --gs-green:#2f8f5b;
  --gs-green-d:#26764b;
  --gs-bg:#f6f8f7;
  --gs-text:#1f3d2b;
  --gs-border:#d6ded9;
  --gs-shadow: 0 14px 40px rgba(0,0,0,.10);
  --danger:#d93b3b;
}

/* ====== 背景＋レイアウト ====== */
.auth-wrap{
  min-height: calc(100vh - 80px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:60px 20px;
  background: var(--gs-bg);
  position:relative;
  overflow:hidden;
}

/* ====== シャトル背景（向きランダム風・数少なめ） ======
   ※ タイル単位でランダム回転は不可のため、
      回転済みSVGを複数レイヤーで混ぜて “ランダムに見せる”
*/
.auth-wrap::before,
.auth-wrap::after{
  content:"";
  position:absolute;
  inset:-140px;
  pointer-events:none;
}

/* レイヤー1：主役（少なめ・分かる濃さ） */
.auth-wrap::before{
  opacity:.18;

  background-image:
    url("/assets/img/bg_shuttle_0.svg"),
    url("/assets/img/bg_shuttle_90.svg");

  background-repeat: repeat, repeat;

  /* 数を減らす＝大きめ */
  background-size:
    120px auto,
    240px auto;

  /* 規則性を消す（重要） */
  background-position:
    80px 120px,
    320px 260px;
}

/* レイヤー2：補助（向き追加・薄め） */
.auth-wrap::after{
  opacity:.10;

  background-image:
    url("/assets/img/bg_shuttle_180.svg"),
    url("/assets/img/bg_shuttle_45.svg");

  background-repeat: repeat, repeat;

  background-size:
    740px auto,
    580px auto;

  background-position:
    160px 40px,
    420px 340px;

  /* レイヤー全体の角度を変える（さらにランダム感） */
  transform: rotate(9deg);
}

/* スマホは少し控えめ */
@media (max-width: 768px){
  .auth-wrap{
    padding:40px 16px;
  }
  .auth-wrap::before{ opacity:.12; }
  .auth-wrap::after{ opacity:.07; }
}

/* ====== カード ====== */
.auth-card{
  width:100%;
  max-width:480px;
  background:#fff;
  border-radius:16px;
  padding:36px 34px;
  box-shadow: var(--gs-shadow);
  position:relative;
  z-index:1;
}

.auth-card.wide{ max-width:860px; }

.auth-title{
  text-align:center;
  font-size:26px;
  margin:0 0 26px;
  color:var(--gs-text);
}

/* ====== フォーム ====== */
.row{ margin-bottom:16px; }

.form-label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}

.input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--gs-border);
  font-size:15px;
  background:#fff;
}

.input:focus{
  outline:none;
  border-color:var(--gs-green);
  box-shadow:0 0 0 3px rgba(47,143,91,.15);
}

.input.is-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(217,59,59,.15);
}

.field-error{
  font-size:12px;
  color:#a21d1d;
  margin-top:6px;
}

/* ====== ボタン ====== */
.btn{
  width:100%;
  padding:13px;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  border:none;
  cursor:pointer;
}

.btn-primary{
  background:var(--gs-green);
  color:#fff;
}
.btn-primary:hover{ background:var(--gs-green-d); }

.btn-outline{
  background:#fff;
  border:1px solid #ccc;
}

/* Googleボタン（ロゴ想定） */
.btn-google{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  border:1px solid #ccc;
  background:#fff;
}

/* ====== メッセージ ====== */
.alert-error{
  background:#fff3f3;
  border:1px solid #f3c7c7;
  padding:12px;
  border-radius:12px;
  margin-bottom:16px;
  color:#a21d1d;
  white-space:pre-line;
}

.alert-success{
  background:#f2fff7;
  border:1px solid #c7f3d6;
  padding:12px;
  border-radius:12px;
  margin-bottom:16px;
}

/* ====== Shake ====== */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.shake{ animation: shake .35s; }

.badge-required{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:#d93b3b;
  vertical-align:middle;
}
/* ===============================
   背景は common.css (body) に統一
   auth-wrap 側の背景は無効化する
   =============================== */
.auth-wrap{
  background: transparent !important;
}
.auth-wrap::before,
.auth-wrap::after{
  content: none !important;
  background: none !important;
}