:root {
  --bg:#f6f7fb; --card:#fff; --text:#222; --muted:#666;
  --primary:#e11; --primary-contrast:#fff; --border:#e5e7eb;
  --focus:#2563eb;
}
* { box-sizing: border-box; }
body.auth-body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  display:grid; min-height:100vh; place-items:center;
}
.auth-card {
  width:min(420px,92vw); background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:28px 24px; box-shadow:0 10px 30px rgba(0,0,0,.04);
}
.auth-title { margin:0 0 12px; font-size:24px; font-weight:700; }
.auth-label { display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
.auth-field { position:relative; }

.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"]{
  width:100%; padding:12px 14px; border:1px solid var(--border);
  border-radius:10px; font-size:16px; outline:none; background:#fff;
}
.auth-card input[type="text"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="email"]:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.auth-password .auth-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; padding:6px; cursor:pointer; opacity:.7;
}
.auth-eye:hover{ opacity:1; }
.auth-actions{ margin-top:18px; }
.auth-button{
  width:100%; padding:12px 16px; border-radius:10px; border:none;
  background:var(--primary); color:var(--primary-contrast);
  font-size:16px; font-weight:700; cursor:pointer;
}
.auth-button:hover{ filter:brightness(.98); }
.auth-error{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca;
  padding:10px 12px; border-radius:10px; margin-bottom:10px; }
.auth-error-small{ color:#b91c1c; font-size:12px; margin-top:6px; }
.auth-links{ margin-top:12px; text-align:center; }
.auth-links a{ color:#2563eb; text-decoration:none; }
.auth-links a:hover{ text-decoration:underline; }


.auth-card select {
  width: 100%;
  font-size: 16px;
  line-height: 1.2;
  padding: 12px 44px 12px 14px;   /* 右に矢印分の余白 */
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  outline: none;

  /* OSネイティブ装飾を外す（統一のため） */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 右側に小さな矢印アイコン（SVG埋め込み） */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray'>\
  <path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.auth-card select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ----- Signup: 共有アカウントチェック（auth.css に集約） ----- */
.form-row label.form-check{
  display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fafafa; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.form-row label.form-check:hover{
  background:#f1f5f9;
  border-color:#cbd5e1;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.form-check-input{ width:18px; height:18px; margin-top:2px; cursor:pointer; accent-color:#e11d48; }
.form-check-label{ display:inline-flex; flex-direction:column; line-height:1.35; }
.help-text{ color:#6b7280; font-size:12px; margin-top:2px; }