/* 이펙터 · 2026-10 제작 · 로그인·회원가입 화면 스타일 */

:root {
  --mb-w-s: 23.4375rem;
  --mb-w-m: 30rem;
  --mb-w-l: 75rem;
  --mb-w-card: 50rem;
  --mb-w-card-in: 28.125rem;
  --mb-h: 3rem;
  --mb-px: 1rem;
  --mb-r: .1875rem;
  --mb-pill: 62.5rem;
  --mb-line: #d9d9d9;
  --mb-line-2: #bbbbbb;
  --mb-ph: #8a8a8a;
  --mb-box: #f2f2f2;
  --mb-err: #b86464;
  --mb-ok: #3da5ff;
  --mb-pt: 3rem;
  --mb-pb: 4rem;
  --mb-title: 1.75rem;
}
@media (min-width: 768px)  { :root { --mb-h: 3.375rem; --mb-px: 1.25rem; --mb-pb: 6rem; --mb-title: 2rem; } }
@media (min-width: 992px)  { :root { --mb-pb: 8.5rem; } }

.mb-main { padding-top: var(--mb-pt); padding-bottom: var(--mb-pb); }
.mb-main-card { --mb-pt: 3rem; }
.mb-main-form { --mb-pt: 3rem; }
@media (min-width: 768px) { .mb-main-card { --mb-pt: 4rem; } .mb-main-form { --mb-pt: 5rem; } }
@media (min-width: 992px) { .mb-main-card { --mb-pt: 5rem; } .mb-main-form { --mb-pt: 9.5rem; } .mb-main-fix { min-height: 62.5rem; } }

.mb-form { width: 100%; max-width: var(--mb-w-s); margin-inline: auto; }
.mb-form-m { max-width: var(--mb-w-m); }
.mb-form-l { max-width: var(--mb-w-l); }

.mb-title { margin: 0 0 2.5rem; font-size: var(--mb-title); font-weight: 800; line-height: 1.25; text-align: center; color: var(--ss-ink); }

.mb-group + .mb-group { margin-top: 2rem; }
.mb-label { display: block; margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ss-ink); }
.mb-input { display: block; width: 100%; height: var(--mb-h); padding: 0 var(--mb-px); border: 1px solid var(--mb-line); border-radius: var(--mb-r); background: var(--ss-white); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ss-ink); transition: border-color .15s; -webkit-appearance: none; appearance: none; }
.mb-input::placeholder { color: var(--mb-ph); opacity: 1; }
.mb-input:hover { border-color: var(--mb-line-2); }
.mb-input:focus { outline: 0; border-color: var(--ss-ink); }
.mb-input:focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--ss-ink); }

.mb-msg { margin: .25rem 0 0; padding-inline: .3125rem; font-size: .875rem; font-weight: 500; line-height: 1.25rem; color: var(--mb-err); }
.mb-msg-ok { color: var(--mb-ok); }
.mb-msg-note { font-weight: 300; color: var(--mb-ph); }
.mb-msg[hidden] { display: none; }

.mb-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--mb-h); padding-inline: 1.5rem; border: 1px solid var(--ss-ink); border-radius: var(--mb-pill); background: var(--ss-white); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1; color: var(--ss-ink); text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.mb-btn-block { display: flex; width: 100%; }
.mb-btn-primary { background: var(--ss-ink); color: var(--ss-white); font-weight: 700; }
.mb-btn-primary:hover { background: var(--ss-text-2); border-color: var(--ss-text-2); }
.mb-btn-line:hover { background: var(--ss-bg-soft); }
.mb-btn-ghost { border-color: var(--mb-line); color: var(--mb-ph); }
.mb-btn-ghost:hover { border-color: var(--mb-line-2); }
.mb-btn:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.mb-btn[disabled] { opacity: .5; cursor: default; }
@media (min-width: 768px) { .mb-btn { font-size: 1.125rem; } }
.mb-submit { margin-top: 2.5rem; }
.mb-btn + .mb-btn { margin-top: 1rem; }

.mb-actions { display: flex; gap: .75rem; margin-top: 4rem; }
.mb-actions .mb-btn { flex: 1 1 0; min-width: 0; margin: 0; }
@media (min-width: 768px) { .mb-actions { gap: 1rem; } .mb-form-l .mb-actions { gap: 1.25rem; justify-content: center; } .mb-form-l .mb-actions .mb-btn { flex: 0 1 17.5rem; } }

.mb-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.mb-links a { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--ss-muted); }
.mb-links a:hover { color: var(--ss-ink); text-decoration: underline; }
.mb-links li + li::before { content: ""; display: inline-block; width: 1px; height: .75rem; margin-inline: .75rem; vertical-align: middle; background: var(--mb-line-2); }
.mb-links li { display: flex; align-items: center; }

.mb-lead { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: center; color: var(--ss-ink); }
.mb-box { display: flex; align-items: center; justify-content: center; min-height: 7.5rem; margin-top: 1rem; padding: 1rem; border-radius: var(--mb-r); background: var(--mb-box); font-size: 1.125rem; font-weight: 500; line-height: 1.5; text-align: center; color: var(--mb-ph); overflow-wrap: anywhere; }
.mb-box-ink { color: var(--ss-ink); }
.mb-lead + .mb-box { margin-top: 1.5rem; }

.mb-resend { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.25rem 0 0; padding-inline: .3125rem; font-size: 1rem; line-height: 1.5; }
.mb-resend span { font-weight: 400; color: var(--mb-ph); }
.mb-resend button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ss-ink); cursor: pointer; }
.mb-resend button:hover { text-decoration: underline; }
.mb-resend + .mb-btn { margin-top: 2.5rem; }

.mb-card { width: 100%; max-width: var(--mb-w-card); margin-inline: auto; padding: 3rem 1rem; border: 1px solid var(--ss-line); background: var(--ss-white); text-align: center; }
@media (min-width: 768px) { .mb-card { padding: 4rem 2rem; } }
.mb-card-logo { display: flex; justify-content: center; margin: 0; }
.mb-card-logo-img { width: 7.5rem; }
@media (min-width: 768px) { .mb-card-logo-img { width: 9.375rem; } }
.mb-card-lead { margin: 1rem 0 0; font-size: .9375rem; line-height: 1.5; color: #1d1d1f; }
.mb-card form { max-width: var(--mb-w-card-in); margin-inline: auto; }

.mb-line { margin-top: 1rem; text-align: left; }
.mb-card-lead + form .mb-line:first-child { margin-top: 1.5rem; }
.mb-line-input { display: block; width: 100%; height: 3.5rem; padding: 0 .625rem; border: 0; border-bottom: 1px solid #a0a0a0; border-radius: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 400; color: var(--ss-ink); transition: border-color .15s; -webkit-appearance: none; appearance: none; }
.mb-line-input::placeholder { color: #888; opacity: 1; }
.mb-line-input:focus { outline: 0; border-bottom-color: var(--ss-ink); box-shadow: 0 1px 0 var(--ss-ink); }

.mb-card .mb-links { margin-top: 2.5rem; }
.mb-card .mb-submit { width: min(100%, 12.5rem); height: var(--mb-h); margin: 2.5rem auto 0; }
@media (min-width: 768px) { .mb-card .mb-submit { width: min(100%, var(--mb-w-s)); } }
.mb-sns-t { margin: 2.5rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ss-text-2); }
@media (min-width: 768px) { .mb-sns-t { font-size: 1rem; } }
.mb-sns { display: flex; justify-content: center; gap: 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.mb-sns-btn { display: block; width: 3.125rem; height: 3.125rem; border-radius: 50%; overflow: hidden; }
@media (min-width: 768px) { .mb-sns-btn { width: 3.75rem; height: 3.75rem; } }
.mb-sns-btn .img-ph, .mb-sns-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mb-sns-btn:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.mb-sns[hidden], .mb-sns-t[hidden] { display: none; }
.mb-notice { margin: 1.5rem 0 0; font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--ss-text-2); }
.mb-notice[hidden] { display: none; }
.mb-notice + .mb-card-lead { margin-top: .5rem; }

.mb-chk { display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; font-size: .875rem; font-weight: 400; line-height: 1.5; color: var(--mb-ph); }
.mb-chk input, .mb-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mb-chk-box { position: relative; flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--mb-line-2); border-radius: .125rem; background: var(--ss-white); transition: background-color .15s, border-color .15s; }
.mb-chk input:checked + .mb-chk-box { background: var(--ss-ink); border-color: var(--ss-ink); }
.mb-chk input:checked + .mb-chk-box::after { content: ""; position: absolute; inset: -.1875rem; background: var(--ss-white); -webkit-mask: url(../../../icons/ico-check.svg) center / contain no-repeat; mask: url(../../../icons/ico-check.svg) center / contain no-repeat; }
.mb-chk input:focus-visible + .mb-chk-box, .mb-radio input:focus-visible + .mb-radio-dot { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.mb-chk.is-invalid .mb-chk-box { border-color: var(--mb-err); }

.mb-radio { display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ss-ink); }
.mb-radio-dot { position: relative; flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid var(--mb-line); border-radius: 50%; background: var(--ss-white); transition: background-color .15s, border-color .15s; }
.mb-radio input:checked + .mb-radio-dot { background: var(--ss-ink); border-color: var(--ss-ink); }
.mb-radio input:checked + .mb-radio-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 50%; background: var(--ss-white); }

.mb-inline { display: flex; gap: .5rem; }
.mb-inline .mb-input { flex: 1 1 0; min-width: 0; }
.mb-sbtn { flex: none; width: 8.5rem; height: var(--mb-h); padding: 0 .5rem; border: 1px solid var(--mb-line); border-radius: var(--mb-r); background: var(--ss-white); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1; color: var(--mb-ph); text-align: center; cursor: pointer; transition: border-color .15s; }
.mb-sbtn:hover { border-color: var(--mb-line-2); }
.mb-sbtn:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
@media (min-width: 768px) { .mb-inline { gap: 1.25rem; } .mb-sbtn { width: 11.25rem; } }
.mb-recv { margin-top: .5rem; }
.mb-gender { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; margin-top: 2rem; }
.mb-gender-t { min-width: 4.5rem; margin: 0; }
.mb-gender-opts { display: flex; align-items: center; gap: 1.25rem; }

.mb-chk-lg { gap: 1rem; font-size: 1rem; font-weight: 600; color: #777; }
.mb-chk-lg .mb-chk-t { order: 1; }
.mb-chk-lg .mb-chk-box { order: 2; width: 1.625rem; height: 1.625rem; }
.mb-chk-lg input:checked + .mb-chk-box::after { inset: -.25rem; }
.mb-terms { margin-top: 1.5rem; padding: 1.25rem 1rem 1rem; border: 1px solid var(--mb-line-2); border-radius: var(--mb-r); background: var(--ss-white); }
.mb-terms + .mb-terms { margin-top: 1.5rem; }
@media (min-width: 768px) { .mb-terms { padding: 2.5rem 2.5rem 1.25rem; } }
.mb-terms-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e1e1e1; }
.mb-terms-head .mb-chk { color: #999; }
.mb-terms-more { display: inline-flex; align-items: center; gap: .3125rem; flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 400; line-height: 1.5; color: var(--mb-ph); cursor: pointer; }
.mb-terms-more::after { content: ""; width: .75rem; height: .5rem; background: currentColor; -webkit-mask: url(../../../icons/ico-chevron-down.svg) center / contain no-repeat; mask: url(../../../icons/ico-chevron-down.svg) center / contain no-repeat; transition: transform .2s; }
.mb-terms-more[aria-expanded="false"]::after { transform: rotate(-90deg); }
.mb-terms-more:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.mb-terms-body { max-height: 9.5rem; margin-top: .5rem; overflow-y: auto; font-size: .875rem; font-weight: 300; line-height: 1.125rem; color: #999; white-space: pre-line; overscroll-behavior: contain; }
.mb-terms-body[hidden] { display: none; }
.mb-terms-body:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
.mb-form-l .mb-actions { margin-top: 4rem; }
.mb-agree-msg { margin-top: 1rem; text-align: center; }

.mb-card-logo img.mb-card-logo-img { display: block; height: auto; }
.mb-card-logo img.mb-card-logo-img-pc { display: none; }
@media (min-width: 768px) { .mb-card-logo img.mb-card-logo-img-pc { display: block; } .mb-card-logo img.mb-card-logo-img-mo { display: none; } }