/* ma 영역(회원 인증) 전용 스타일 — 클래스는 .ma- 로 시작 */

/* 로고 줄 */
.ma-brand { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-lg) var(--font-num); color: var(--ink); }

/* 가입 단계 */
.ma-steps { display: flex; gap: 6px; counter-reset: none; }
.ma-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; min-width: 0; white-space: nowrap; }
.ma-steps li .num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 700; flex: 0 0 auto; }
.ma-steps li[aria-current="step"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.ma-steps li[aria-current="step"] .num { background: var(--accent); color: var(--surface); }
.ma-steps li.is-done { color: var(--ink-2); }
.ma-steps li.is-done .num { background: var(--accent-soft); color: var(--accent-ink); }

/* 비밀번호 칸 + 보기 버튼 */
.ma-pw { position: relative; }
.ma-pw .input { padding-right: 52px; }
.ma-pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

/* 또는(구분선) */
.ma-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--fs-sm); }
.ma-or::before, .ma-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 작은 링크 줄 */
.ma-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: var(--fs-sm); color: var(--ink-2); }
.ma-links a { padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ma-links a:hover { color: var(--ink); text-decoration-color: var(--ink-2); }

/* 약관 동의 묶음 */
.ma-agree-box { padding: 8px 16px; }
.ma-agree { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.ma-agree:last-of-type { border-bottom: 0; }
.ma-agree .check { flex: 1; min-width: 0; }
.ma-view { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--ink-3); padding: 8px 4px; min-height: 44px; flex: 0 0 auto; }
.ma-view .ic { width: 16px; height: 16px; }
.ma-view:hover { color: var(--ink); }
.ma-agree-box .field-err { margin: 0 0 8px; }
.ma-req { color: var(--accent-ink); font-weight: 700; }
.ma-normal { font-weight: 400; }
.ma-desc { display: block; font-weight: 400; margin-top: 2px; }
.ma-agree-note { margin-bottom: 8px; }

/* 키-값 목록 */
.ma-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.ma-kv dt { color: var(--ink-3); }
.ma-kv dd { font-weight: 500; color: var(--ink); word-break: break-all; }

/* 가입 완료 — 다음 할 일 */
.ma-sub { font-size: var(--fs-lg); }
.ma-next .row { align-items: flex-start; flex-wrap: nowrap; }
.ma-next p { margin-top: 2px; }

/* 소셜 버튼 */
.ma-social { gap: 8px; }
.ma-s-google .s-logo { background: var(--surface-2); color: var(--ink); }
.ma-social-head { display: flex; gap: 14px; align-items: flex-start; }
.ma-s-badge { min-height: 52px; width: 52px; padding: 0; flex: 0 0 auto; pointer-events: none; }
.ma-s-badge .s-logo { width: 30px; height: 30px; font-size: var(--fs-md); }

/* 결과 상자(아이디 찾기) */
.ma-result { text-align: center; }
.ma-result-title { font-weight: 700; font-size: var(--fs-lg); }
.ma-big { font: 700 var(--fs-h4) var(--font-num); word-break: break-all; }
.ma-result .empty { padding: 8px 0; border: 0; background: none; }

/* 가운데 정렬 버튼 줄 · 두 칸 버튼 */
.ma-center { justify-content: center; }
.ma-two > .btn { flex: 1 1 140px; }

@media (max-width: 600px) {
  .ma-steps li { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; font-size: var(--fs-xs); }
  .ma-social-head h1 { font-size: var(--fs-h4); }
}