body { margin: 0; background: #FDFBF7; font-family: Pretendard, -apple-system, sans-serif; color: #1A1F16; }
.mb-wrap { max-width: 440px; margin: 0 auto; padding: 96px 20px 80px; }
.mb-back { display: inline-block; margin-bottom: 16px; color: #3E522D; font-size: 13px; font-weight: 600; text-decoration: none; }
h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 8px; }
.mb-lead { color: #5A6354; font-size: 14px; line-height: 1.6; margin: 0 0 24px; }
.mb-card label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.mb-card input {
  width: 100%; box-sizing: border-box; border: 1px solid #E9E4DB; border-radius: 12px;
  padding: 12px 14px; font-size: 14px; background: #fff; margin-bottom: 14px;
}
.mb-card input:disabled { background: #F7F5F0; color: #5A6354; }
.mb-card button[type="submit"], .mb-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 15px; padding: 14px; cursor: pointer; text-decoration: none;
}
/* .mb-btn { display:flex } 가 [hidden]을 덮지 않도록 */
.mb-btn[hidden], .mb-card button[hidden], [hidden].mb-btn {
  display: none !important;
}
.mb-card button[type="submit"] { background: #3E522D; color: #fff; margin-top: 4px; }
.mb-card button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.mb-social { display: grid; gap: 10px; margin-bottom: 8px; }
.mb-btn--kakao { background: #FEE500; color: #191919; }
.mb-btn--naver { background: #03C75A; color: #fff; }
.mb-btn-ghost {
  width: 100%; margin-top: 10px; border: 1px solid #D9D2C5; border-radius: 999px;
  background: #fff; color: #5A6354; font-weight: 600; font-size: 14px; padding: 12px; cursor: pointer;
}
.mb-danger {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid #E9E4DB;
}
.mb-danger p {
  margin: 0 0 10px; font-size: 12px; color: #8A9284; line-height: 1.5;
}
.mb-btn-danger {
  width: 100%; border: 1px solid #E8B4B4; border-radius: 999px;
  background: #FFF5F5; color: #9B2C2C; font-weight: 700; font-size: 14px;
  padding: 12px; cursor: pointer;
}
.mb-btn-danger:disabled { opacity: .6; cursor: wait; }
.mb-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: #8A9284; font-size: 12px;
}
.mb-divider::before, .mb-divider::after {
  content: ""; flex: 1; height: 1px; background: #E9E4DB;
}
.mb-err {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: #FFF5F5; border: 1px solid #F5C2C2; color: #9B2C2C; font-size: 13px;
}
.mb-ok {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: #EEF3EA; border: 1px solid #C9D8BB; color: #3E522D; font-size: 13px;
}
.mb-hint { color: #8A9284; font-size: 12px; margin: 0 0 16px; }
.mb-foot { margin-top: 20px; text-align: center; font-size: 13px; color: #5A6354; }
.mb-foot a { color: #3E522D; font-weight: 700; text-decoration: none; }
.mb-check {
  display: flex; gap: 10px; align-items: center; font-size: 13px; color: #5A6354;
  margin: 4px 0 18px; cursor: pointer;
}
.mb-check input { width: 18px; height: 18px; margin: 0; }
.mb-links {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.mb-links a {
  display: inline-flex; padding: 8px 12px; border-radius: 999px;
  border: 1px solid #D9D2C5; background: #fff; color: #3E522D;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.mb-pw {
  margin: 8px 0 14px; padding: 14px; border-radius: 14px;
  border: 1px solid #E9E4DB; background: #FBFAF7;
}
.mb-pw-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #3E522D; }
.mb-section-title {
  margin: 18px 0 10px; font-size: 13px; font-weight: 700; color: #3E522D;
}
.mb-section-title:first-child { margin-top: 0; }
.mb-terms {
  margin: 8px 0 18px; padding: 14px; border-radius: 14px;
  border: 1px solid #E9E4DB; background: #FBFAF7;
}
.mb-terms .mb-check { margin: 8px 0; }
.mb-gate {
  margin-top: 24px; padding: 28px 22px; border-radius: 18px;
  border: 1px solid #E9E4DB; background: #fff; text-align: center;
}
.mb-gate h2 { margin: 0 0 8px; font-size: 1.15rem; }
.mb-gate p { margin: 0 0 18px; color: #5A6354; font-size: 14px; line-height: 1.55; }
.mb-gate .mb-social { max-width: 320px; margin: 0 auto 12px; }