/* =====================================================================
   isREAL public UI — 会員画面(登録/ログイン/マイページ/パスワード再設定)
   tokens.css を前提とするコンポーネントCSS。
   chrome = cast-detail.css、ページ見出し = cast-index.css を併読。
   ゴールデンスクリーン: /_p/ir-golden-member-8f4a2c6d/
   実装WOでは参照のみ・編集禁止(変更はデザインレビューを通す)。
   方針: 既存フロー・ロジックは変更せず、デザインのみ張り替える。
   ===================================================================== */

.mb-page { max-width: 430px; margin: 0 auto; padding-bottom: 104px; }
@media (min-width: 768px) { .mb-page { max-width: 560px; } }

.mb-card { padding: 4px 22px 0; }
.mb-step {
  font-family: var(--ir-font-meta);
  font-size: var(--ir-type-micro); letter-spacing: 0.18em; color: var(--ir-brass);
  margin-bottom: 10px;
}
.mb-title {
  font-family: var(--ir-font-display); font-weight: 600;
  font-size: 20px; letter-spacing: 0.06em; line-height: 1.6;
  color: var(--ir-ink);
}
.mb-copy {
  margin-top: 10px;
  font-family: var(--ir-font-sans); font-weight: 300;
  font-size: 13.5px; line-height: 1.9; letter-spacing: 0.05em;
  color: var(--ir-muted);
}

/* ---- form ---- */
.mb-form { margin-top: 24px; }
.mb-label {
  display: block;
  font-family: var(--ir-font-sans);
  font-size: 12.5px; letter-spacing: 0.12em; color: var(--ir-muted);
  margin: 18px 0 8px;
}
.mb-input {
  width: 100%; padding: 14px;
  background: var(--ir-surface);
  border: 1px solid var(--ir-line); border-radius: 2px;
  font-family: var(--ir-font-sans); font-size: 16px;
  letter-spacing: 0.03em; color: var(--ir-ink);
}
.mb-input:focus { outline: none; border-color: var(--ir-forest); }
.mb-input--num { font-family: var(--ir-font-meta); }
.mb-input--code {
  font-family: var(--ir-font-meta);
  font-size: 24px; letter-spacing: 0.5em; text-align: center;
  padding: 16px 8px 16px calc(8px + 0.5em);
}
.mb-textarea {
  width: 100%; min-height: 150px; padding: 14px;
  background: var(--ir-surface);
  border: 1px solid var(--ir-line); border-radius: 2px;
  font-family: var(--ir-font-sans); font-size: 16px;
  line-height: 1.9; letter-spacing: 0.03em; color: var(--ir-ink);
  resize: vertical;
}
.mb-textarea:focus { outline: none; border-color: var(--ir-forest); }
.mb-context {
  margin-top: 20px; padding: 12px 14px;
  background: var(--ir-paper); border-radius: 2px;
  font-family: var(--ir-font-sans);
  font-size: 13.5px; letter-spacing: 0.05em; color: var(--ir-ink-soft);
}
.mb-context b { font-family: var(--ir-font-display); font-weight: 600; }
.mb-hint {
  margin-top: 10px;
  font-family: var(--ir-font-sans); font-weight: 400;
  font-size: 12px; line-height: 1.8; letter-spacing: 0.05em;
  color: var(--ir-subtle);
}
.mb-error {
  margin-top: 18px; padding: 12px 14px;
  background: var(--ir-changed-bg); border-radius: 2px;
  font-family: var(--ir-font-sans);
  font-size: 13px; line-height: 1.8; letter-spacing: 0.04em;
  color: var(--ir-changed);
}

/* ---- buttons / links ---- */
.mb-primary {
  display: block; width: 100%; margin-top: 24px; padding: 15px;
  background: var(--ir-forest); border: 1px solid var(--ir-forest); border-radius: 2px;
  color: var(--ir-on-forest); text-align: center; text-decoration: none;
  font-family: var(--ir-font-sans); font-weight: 500;
  font-size: var(--ir-type-ui); letter-spacing: var(--ir-tracking-cta);
  cursor: pointer;
}
.mb-primary:active { background: var(--ir-forest-active); }
.mb-primary[disabled] { opacity: 0.45; cursor: default; }
.mb-secondary {
  display: block; width: 100%; margin-top: 12px; padding: 14px;
  background: var(--ir-surface); border: 1px solid var(--ir-line); border-radius: 2px;
  color: var(--ir-ink-soft); text-align: center; text-decoration: none;
  font-family: var(--ir-font-sans);
  font-size: 13.5px; letter-spacing: 0.12em;
  cursor: pointer;
}
.mb-links { margin-top: 28px; display: grid; gap: 14px; }
.mb-links a, .mb-textlink {
  font-family: var(--ir-font-sans);
  font-size: 13.5px; letter-spacing: 0.08em; color: var(--ir-forest);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--ir-sage);
  background: none; border: none; padding: 0; cursor: pointer;
}
.mb-resend {
  margin-top: 14px; padding: 6px 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--ir-font-sans);
  font-size: 13px; letter-spacing: 0.08em; color: var(--ir-forest);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--ir-sage);
}
.mb-resend[disabled] {
  color: var(--ir-disabled); text-decoration: none; cursor: default;
}

/* ---- 選択カード(コース等・少数選択肢のラジオ) ---- */
.mb-choice {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 8px; padding: 15px 14px;
  background: var(--ir-surface);
  border: 1px solid var(--ir-line); border-radius: 2px;
  font-family: var(--ir-font-sans);
  font-size: 13.5px; letter-spacing: 0.05em; color: var(--ir-ink-soft);
  cursor: pointer;
}
.mb-choice__dot {
  width: 16px; height: 16px; flex-shrink: 0; align-self: center;
  border: 1px solid var(--ir-line); border-radius: 50%;
}
.mb-choice__label { flex: 1; font-family: var(--ir-font-en); font-style: italic; font-size: 17px; color: var(--ir-ink); }
.mb-choice__label small { font-size: 12px; letter-spacing: 0.12em; color: var(--ir-muted); margin-left: 4px; }
.mb-choice__price { font-family: var(--ir-font-meta); font-size: 13px; color: var(--ir-ink); }
.mb-choice[aria-checked="true"] { border-color: var(--ir-forest); }
.mb-choice[aria-checked="true"] .mb-choice__dot {
  border-color: var(--ir-forest);
  background: radial-gradient(circle at center, var(--ir-forest) 0 5px, transparent 5.5px);
}

/* ---- 完了メッセージ ---- */
.mb-done {
  margin-top: 24px; padding: 18px;
  background: var(--ir-paper); border-radius: 2px;
  font-family: var(--ir-font-sans); font-weight: 400;
  font-size: 13px; line-height: 1.9; letter-spacing: 0.05em;
  color: var(--ir-ink-soft);
}

/* ---- マイページの情報行 ---- */
.mb-rows { margin-top: 22px; }
.mb-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 2px; border-bottom: 1px solid var(--ir-line);
  font-family: var(--ir-font-sans);
  font-size: 13px; letter-spacing: 0.05em; color: var(--ir-ink-soft);
}
.mb-row:first-child { border-top: 1px solid var(--ir-line); }
.mb-row__v {
  font-family: var(--ir-font-meta);
  font-size: 13.5px; text-align: right; color: var(--ir-ink);
}
.mb-row__v a {
  margin-left: 10px;
  font-family: var(--ir-font-sans); font-size: 12.5px; color: var(--ir-forest);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--ir-sage);
}