/* ============================================================
   ログイン画面 専用スタイル
   共通部分は css/common.css（ヘッダー／メニューは無し）
   ============================================================ */

/* ページ最上部のアクセント帯（index.html のヘッダーと同じ） */
body{border-top:5px solid #9c6a45;}

.login-main{
  width:100%;
  flex:1 0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-12) var(--pad-x);
}

/* 見出し（上）＋ フォーム（下）。枠なし */
.login-card{
  width:100%;max-width:480px;
  display:flex;flex-direction:column;gap:var(--sp-6);
}

.login-brand{
  margin:0;
  text-align:center;
  font-size:var(--fs-h2);letter-spacing:.02em;
  color:var(--text);
}

/* 認証エラー（赤字） */
.login-error{
  margin:0;
  text-align:center;
  font-size:var(--fs-small);font-weight:700;
  color:var(--error);
}

.login-form{display:flex;flex-direction:column;gap:var(--sp-3);}

/* ラベルは左、入力は右 */
.login-form .field{
  display:grid;
  grid-template-columns:6em 1fr;
  align-items:center;
  gap:var(--sp-1) var(--sp-3);
}
.login-form .field label{
  text-align:left;
  font-size:var(--fs-small);font-weight:700;color:var(--text-sub);
}
.login-form .field input,
.login-form .field select{
  width:100%;font:inherit;font-size:var(--fs-body);color:var(--text);
  min-height:44px;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--surface);
}
.login-form .field input:focus,
.login-form .field select:focus{
  outline:none;border-color:var(--primary);background:var(--surface);
}
.login-form .field input::placeholder{color:#b8a99c;}

/* 次回から自動ログインする（中央） */
.login-remember{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-size:var(--fs-small);color:var(--text);cursor:pointer;
}
.login-remember input{
  width:18px;height:18px;flex:none;margin:0;accent-color:var(--primary-strong);
}

.login-form .btn{width:100%;margin-top:var(--sp-2);}

/* ---------- レスポンシブ ---------- */
@media (min-width:1024px){
  /* PC サイトのみ：フォームは上から 20% の位置 */
  .login-main{align-items:flex-start;padding-top:20vh;}
}
@media (min-width:768px){
  /* PC：ログインボタンは幅半分・中央 */
  .login-form .btn{width:50%;align-self:center;}
}
@media (max-width:767px){
  .login-form .field{grid-template-columns:1fr;gap:var(--sp-1);}
}