/*
 * OTSUNAGI 認証画面共通スタイル
 * TSUNAGARI の認証 UI 仕様（2026-05-19）に合わせる
 * - レイアウト / カード / 入力欄 / ボタン / エラー / 必須表記
 * - primary 色は OTSUNAGI の青（#2b6cb0）を維持
 */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  background: #fdf3e0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #1f2937;
}

/* カード */
.auth-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #f3f4f6;
  padding: 24px;
  width: 100%;
  max-width: 360px;
}
.auth-card.auth-card-md { max-width: 448px; }

@media (min-width: 640px) {
  .auth-card { padding: 32px; }
}

/* ロゴ／見出し */
.auth-header {
  text-align: center;
  margin-bottom: 24px;
}
.auth-logo-icon {
  font-size: 40px;
  line-height: 1;
}
.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.auth-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
.auth-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  text-align: center;
}
.auth-page-subtitle {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
  margin-top: 4px;
}

/* 小さめロゴ画像（signup / forgot-password / reset-password / verify-email 用） */
/* HTML 順序: caption（上）→ img（下） */
.auth-logomoji-caption {
  font-family: 'Kiwi Maru', serif;
  font-weight: 500;
  font-size: clamp(15px, 5vw, 19px);
  color: #666666;
  line-height: 1.15;
  margin: 0 0 5px;
  /* ロゴ画像内の実文字幅（左5.5%/右7.45%）に justify で整列（login と同方式） */
  padding-left: 5.5%;
  padding-right: 7.45%;
  text-align: justify;
  text-align-last: justify;
}
.auth-logomoji-img {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 20px;
}

/* 必須項目凡例 */
.required-legend {
  font-size: 12px;
  color: #6b7280;
  text-align: right;
  margin-bottom: 12px;
}
.asterisk { color: #ef4444; }
.optional { color: #9ca3af; font-weight: 400; margin-left: 4px; font-size: 12px; }

/* フォーム */
.auth-form > * + * { margin-top: 16px; }

.label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.input-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
  background: #fff;
  transition: box-shadow 150ms, border-color 150ms;
}
.input-field::placeholder { color: #9ca3af; }
.input-field:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #2b6cb0;
}

textarea.input-field {
  resize: vertical;
  min-height: 80px;
}

.hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* パスワード表示トグル */
.password-wrap {
  position: relative;
}
.password-wrap .input-field {
  padding-right: 40px;
}
.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ボタン */
.btn-primary {
  background: #2b6cb0;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background-color 150ms;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover { background: #2c5282; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  width: auto;
}

/* エラー / 警告 / 情報 */
.error-msg {
  color: #dc2626;
  background: #fef2f2;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.info-msg {
  color: #1e40af;
  background: #eff6ff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}

/* リンク */
.auth-link {
  color: #2b6cb0;
  text-decoration: none;
  font-size: 14px;
}
.auth-link:hover { text-decoration: underline; }

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #4b5563;
}
.auth-footer-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.auth-back {
  margin-top: 24px;
  font-size: 14px;
}

/* 完了画面用 */
.auth-sent-email {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  word-break: break-all;
}