/* ============================================================
   auth-wanted.css — 로그인/회원가입 Wanted DS 클론
   login.html + signup.html 전용 오버레이. wanted-ds.css 위에 로드.
   데이터 로직은 js/auth.js 그대로 사용(재스킨 전용).
   ============================================================ */

:root {
  /* wanted-ds.css에 없는 토큰 보강 */
  --ws-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ws-shadow-overlay: 0 1px 2px rgba(23, 23, 25, 0.06),
    0 12px 40px rgba(23, 23, 25, 0.1);
  --ws-shadow-card: 0 1px 2px rgba(23, 23, 23, 0.06),
    0 12px 40px rgba(23, 23, 25, 0.1);
  --blue-70: rgb(102, 153, 255);
  /* 보조 텍스트용 — DS의 assistive(1.7:1)/alternative(3.7:1)가 흰 배경에서 WCAG AA(4.5:1) 미달이라 페이지 한정 보정 (≈5.3:1) */
  --wa-text-sub: rgba(55, 56, 60, 0.74);
}

/* ── 리셋/기본 ── */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-sans);
  color: var(--ws-text-strong);
  background: var(--ws-bg-alt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 페이지 셸 ── */
.wa-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
/* 카드 뒤 라디얼 블루 글로우 */
.wa-page::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(51, 102, 255, 0.16) 0%,
    rgba(51, 102, 255, 0.06) 38%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}

.wa-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 432px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── 카드 ── */
.wa-card {
  background: var(--ws-bg);
  border-radius: 20px;
  box-shadow: var(--ws-shadow-card);
  padding: 36px 34px;
}

/* ── 브랜드 블록 ── */
.wa-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 26px;
}
.wa-brand-row {
  /* 로고 PNG의 상/하 투명 여백(위37%·아래31.5%)을 크롭해 글자만 노출 */
  height: 20px;
  overflow: hidden;
  text-align: center;
  line-height: 0;
}
.wa-logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(
    135deg,
    var(--ws-primary) 50%,
    var(--blue-70) 50%
  );
  flex-shrink: 0;
}
.wa-wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--ws-text-strong);
}
.wa-tagline {
  color: var(--wa-text-sub);
  text-align: center;
}

/* ── 헤드라인 ── */
.wa-head {
  text-align: center;
  margin-bottom: 22px;
}
.wa-head-title {
  color: var(--ws-text-strong);
  margin: 0 0 6px;
}
.wa-head-desc {
  color: var(--wa-text-sub);
  margin: 0;
}

/* ── 소셜 버튼 ── */
.wa-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 48px;
  border-radius: var(--ws-radius-12);
  font: 600 15px/1 var(--font-sans);
  letter-spacing: -0.012em;
  cursor: pointer;
  border: none;
  transition: background var(--ws-duration-fast) var(--ws-ease-standard),
    box-shadow var(--ws-duration-fast) var(--ws-ease-standard);
}
.social-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.social-btn.google {
  background: var(--ws-bg);
  color: var(--ws-text-neutral);
  box-shadow: inset 0 0 0 1px var(--ws-line);
}
.social-btn.google:hover {
  background: var(--ws-fill-alt);
  box-shadow: inset 0 0 0 1px var(--ws-line-strong);
}
.social-btn.kakao {
  background: #fee500;
  color: #191600;
}
.social-btn.kakao:hover {
  background: #f5dc00;
}

/* ── 구분선 ── */
.wa-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--wa-text-sub);
}
.wa-divider::before,
.wa-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ws-line);
}

/* ── 폼 필드 ── */
.wa-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wa-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wa-label {
  color: var(--ws-text-neutral);
  font: 500 14px/20px var(--font-sans);
  letter-spacing: 0.0145em;
}
.wa-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wa-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-radius-12);
  background: var(--ws-bg);
  color: var(--ws-text-strong);
  font: 500 15px/1 var(--font-sans);
  letter-spacing: 0.0096em;
  transition: border-color var(--ws-duration-fast) var(--ws-ease-standard),
    box-shadow var(--ws-duration-fast) var(--ws-ease-standard);
}
.wa-input::placeholder {
  color: var(--wa-text-sub);
}
.wa-input:hover {
  border-color: var(--ws-line-strong);
}
.wa-input:focus {
  outline: none;
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.14);
}
.wa-input.error {
  border-color: var(--ws-negative);
}
.wa-input.success {
  border-color: var(--ws-positive);
}
/* 자동완성 배경 흰색 유지 */
.wa-input:-webkit-autofill,
.wa-input:-webkit-autofill:hover,
.wa-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}
/* 트레일링 토글 버튼이 있는 입력 */
.wa-input-wrap .wa-input {
  padding-right: 62px;
}
.wa-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ws-text-alternative);
  font: 600 13px/1 var(--font-sans);
  padding: 6px 4px;
}
.wa-pw-toggle:hover {
  color: var(--ws-text-neutral);
}

/* ── 이메일 중복확인 상태 (showEmailStatus 대상) ── */
.email-status {
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: var(--ws-radius-10);
  font: 500 13px/18px var(--font-sans);
  display: flex;
  align-items: center;
  gap: 6px;
}
.email-status.success {
  background: var(--blue-95);
  color: var(--ws-primary-strong);
  border: 1px solid var(--blue-90);
}
.email-status.success:before {
  content: '✓';
  font-weight: 700;
}
.email-status.error {
  background: var(--red-95);
  color: var(--red-40);
  border: 1px solid var(--red-90);
}
.email-status.error:before {
  content: '✗';
  font-weight: 700;
}

/* ── 로그인 옵션 행 ── */
.wa-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -2px;
}
.wa-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ws-text-neutral);
  font: 500 14px/20px var(--font-sans);
  letter-spacing: 0.0145em;
}
.wa-check-inline input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--ws-primary);
  cursor: pointer;
}
.forgot-link {
  color: var(--ws-primary);
  text-decoration: none;
}
.forgot-link:hover {
  text-decoration: underline;
}

/* ── 주요 버튼 ── */
.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: var(--ws-radius-12);
  font: 600 15px/1 var(--font-sans);
  letter-spacing: -0.012em;
  border: none;
  cursor: pointer;
  transition: background var(--ws-duration-fast) var(--ws-ease-standard),
    box-shadow var(--ws-duration-fast) var(--ws-ease-standard),
    opacity var(--ws-duration-fast) var(--ws-ease-standard);
}
.wa-btn--primary {
  background: var(--ws-primary);
  color: var(--ws-text-on-primary);
}
.wa-btn--primary:hover {
  background: var(--ws-primary-strong);
}
.wa-btn--primary:disabled {
  background: var(--fill-strong);
  color: var(--ws-text-assistive);
  cursor: not-allowed;
}
.wa-btn--outlined {
  background: var(--ws-bg);
  color: var(--ws-text-neutral);
  box-shadow: inset 0 0 0 1px var(--ws-line);
}
.wa-btn--outlined:hover {
  box-shadow: inset 0 0 0 1px var(--ws-line-strong);
}
.wa-submit-wrap {
  margin-top: 20px;
}

/* ── 카드 하단 링크 ── */
.wa-alt {
  text-align: center;
  margin-top: 20px;
  color: var(--ws-text-alternative);
}
.wa-alt a {
  color: var(--ws-primary);
  text-decoration: none;
  font-weight: 600;
}
.wa-alt a:hover {
  text-decoration: underline;
}

/* ── 신뢰 푸터 ── */
.wa-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--wa-text-sub);
}
.wa-trust svg {
  width: 13px;
  height: 13px;
}

/* ── 인증 상태 메시지 (showAuthStatusMessage) ── */
.auth-status-message {
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--ws-radius-12);
  font: 500 14px/1.5 var(--font-sans);
  white-space: pre-line;
}
.auth-status-message.success {
  background: var(--green-95);
  color: var(--green-40);
  border: 1px solid var(--green-90);
}
.auth-status-message.info {
  background: var(--blue-95);
  color: var(--ws-primary-strong);
  border: 1px solid var(--blue-90);
}

/* ============================================================
   비밀번호 재설정 모달
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--material-dimmer);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-container {
  background: var(--ws-bg);
  border-radius: 18px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--ws-shadow-overlay);
  animation: waModalIn 0.2s var(--ws-ease-emphasized);
  overflow: hidden;
}
@keyframes waModalIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px 0;
}
.modal-title {
  font: 700 18px/26px var(--font-sans);
  letter-spacing: -0.002em;
  color: var(--ws-text-strong);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ws-text-alternative);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background var(--ws-duration-fast) var(--ws-ease-standard);
}
.modal-close:hover {
  background: var(--ws-fill);
  color: var(--ws-text-strong);
}
.modal-content {
  padding: 14px 24px 4px;
}
.modal-description {
  color: var(--ws-text-alternative);
  font: 500 14px/1.55 var(--font-sans);
  margin: 0 0 16px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 24px 24px;
}
.modal-footer .wa-btn {
  width: auto;
  padding: 0 18px;
  height: 44px;
}
.btn-cancel {
  height: 44px;
  padding: 0 18px;
  background: var(--ws-bg);
  color: var(--ws-text-neutral);
  border-radius: var(--ws-radius-12);
  font: 600 15px/1 var(--font-sans);
  box-shadow: inset 0 0 0 1px var(--ws-line);
  border: none;
  cursor: pointer;
}
.btn-cancel:hover {
  box-shadow: inset 0 0 0 1px var(--ws-line-strong);
}
.form-error {
  color: var(--red-40);
  font: 500 13px/1.5 var(--font-sans);
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--red-95);
  border: 1px solid var(--red-90);
  border-radius: var(--ws-radius-10);
}
.form-success {
  color: var(--green-40);
  font: 500 13px/1.5 var(--font-sans);
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--green-95);
  border: 1px solid var(--green-90);
  border-radius: var(--ws-radius-10);
}

/* ============================================================
   회원가입 스텝 위저드
   ============================================================ */
.wa-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.wa-step-counter {
  color: var(--ws-primary);
}
.wa-step-login-link {
  color: var(--ws-text-alternative);
  text-decoration: none;
  font: 500 14px/20px var(--font-sans);
}
.wa-step-login-link:hover {
  color: var(--ws-primary);
}
.wa-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--ws-line);
  overflow: hidden;
  margin-bottom: 20px;
}
.wa-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--ws-primary);
  transform-origin: left center;
  transform: scaleX(0.33333);
  transition: transform var(--ws-duration-normal) var(--ws-ease-emphasized);
}
.wa-step-head {
  text-align: center;
  margin-bottom: 22px;
}
.wa-step-title {
  color: var(--ws-text-strong);
  margin: 0 0 6px;
}
.wa-step-desc {
  color: var(--wa-text-sub);
  margin: 0;
}
.wa-step {
  display: none;
}
.wa-step.active {
  display: block;
}
.wa-nav-row {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.wa-nav-row .wa-btn {
  flex: 1;
}
.wa-nav-row .wa-btn--outlined {
  flex: 0 0 34%;
}

/* ── 비밀번호 강도 미터 ── */
.wa-strength {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.wa-strength.show {
  display: flex;
}
.wa-strength-bars {
  display: flex;
  gap: 5px;
  flex: 1;
}
.wa-strength-seg {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--fill-strong);
  transition: background var(--ws-duration-fast) var(--ws-ease-standard);
}
.wa-strength-label {
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.0252em;
  min-width: 30px;
  text-align: right;
  color: var(--ws-text-alternative);
}

/* ── 역할 선택 카드 ── */
.wa-roles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-role-legend {
  color: var(--ws-text-neutral);
  margin-bottom: 2px;
}
.wa-role {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ws-radius-12);
  background: var(--ws-bg);
  box-shadow: inset 0 0 0 1px var(--ws-line);
  cursor: pointer;
  transition: box-shadow var(--ws-duration-fast) var(--ws-ease-standard),
    background var(--ws-duration-fast) var(--ws-ease-standard);
}
.wa-role:hover {
  box-shadow: inset 0 0 0 1px var(--ws-line-strong);
}
.wa-role.selected {
  background: var(--blue-95);
  box-shadow: inset 0 0 0 1.5px var(--ws-primary);
}
.wa-role-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ws-line-strong);
  flex-shrink: 0;
  position: relative;
  transition: box-shadow var(--ws-duration-fast) var(--ws-ease-standard);
}
.wa-role.selected .wa-role-radio {
  box-shadow: inset 0 0 0 6px var(--ws-primary);
}
.wa-role.selected .wa-role-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.wa-role-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-role-title {
  color: var(--ws-text-strong);
  font: 600 15px/22px var(--font-sans);
}
.wa-role-sub {
  color: var(--wa-text-sub);
}

/* ── 약관 동의 ── */
.wa-agree-all {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--ws-radius-12);
  background: var(--ws-bg-alt);
  cursor: pointer;
  margin-bottom: 6px;
}
.wa-agree-all .wa-agree-title {
  color: var(--ws-text-strong);
  font: 600 15px/22px var(--font-sans);
}
.wa-agree-list {
  display: flex;
  flex-direction: column;
}
.wa-agree-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
}
.wa-agree-row label {
  flex: 1;
  cursor: pointer;
  color: var(--ws-text-neutral);
  font: 500 14px/20px var(--font-sans);
}
.wa-agree-row label a {
  color: var(--ws-primary);
  text-decoration: none;
}
.wa-agree-row label a:hover {
  text-decoration: underline;
}
.wa-req {
  color: var(--ws-primary);
  font-weight: 700;
}
.wa-opt {
  color: var(--ws-text-alternative);
  font-weight: 600;
}
.wa-agree-view {
  color: var(--wa-text-sub);
  text-decoration: none;
  font: 500 13px/18px var(--font-sans);
  flex-shrink: 0;
}
.wa-agree-view:hover {
  color: var(--ws-primary);
  text-decoration: underline;
}
.wa-check {
  width: 20px;
  height: 20px;
  accent-color: var(--ws-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── 초대/팀 코드 확장 ── */
.wa-sep-dashed {
  border: none;
  border-top: 1px dashed var(--ws-line);
  margin: 18px 0;
}
.wa-code-toggle {
  background: none;
  border: none;
  color: var(--ws-primary);
  font: 600 14px/20px var(--font-sans);
  letter-spacing: 0.0145em;
  cursor: pointer;
  padding: 4px 0;
}
.wa-code-toggle:hover {
  text-decoration: underline;
}
.wa-code-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}
.wa-code-panel.show {
  display: flex;
}
.form-help {
  display: block;
  margin-top: 4px;
  color: var(--ws-text-alternative);
  font: 500 12px/16px var(--font-sans);
}
.wa-team-info {
  display: none;
  padding: 14px 16px;
  border-radius: var(--ws-radius-12);
  background: var(--blue-95);
  border: 1px solid var(--blue-90);
  color: var(--ws-primary-strong);
  font: 500 13px/1.6 var(--font-sans);
}
.wa-team-info.show {
  display: block;
}
.wa-team-info strong {
  display: block;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--ws-primary-strong);
}

/* ── 라벨 + 툴팁 행 ── */
.wa-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fill-strong);
  color: var(--ws-text-alternative);
  font: 700 11px/1 var(--font-sans);
  cursor: help;
  user-select: none;
}
.tip-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  padding: 10px 12px;
  border-radius: var(--ws-radius-10);
  background: var(--ws-inverse-bg);
  color: var(--ws-inverse-label);
  font: 500 12px/1.5 var(--font-sans);
  letter-spacing: 0.02em;
  box-shadow: var(--ws-shadow-heavy);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ws-duration-fast) var(--ws-ease-standard),
    transform var(--ws-duration-fast) var(--ws-ease-standard);
  z-index: 20;
  text-align: left;
}
.tip-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ws-inverse-bg);
}
.tip:hover .tip-pop,
.tip:focus .tip-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   비밀번호 재설정 / 프로필 완성 (reset-password, complete-profile)
   ============================================================ */
/* 상태 화면 (로딩/무효링크/성공) */
.wa-state {
  text-align: center;
  padding: 14px 0 6px;
}
.wa-state svg {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
}
.wa-state h2 {
  font: 700 19px/27px var(--font-sans);
  letter-spacing: -0.002em;
  color: var(--ws-text-strong);
  margin: 0 0 6px;
}
.wa-state p {
  color: var(--wa-text-sub);
  font: 500 14px/1.55 var(--font-sans);
  margin: 0;
}
.wa-state .wa-btn {
  width: auto;
  padding: 0 22px;
  margin-top: 18px;
}
a.wa-btn {
  text-decoration: none;
}
.wa-spin {
  animation: waSpin 1s linear infinite;
}
@keyframes waSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 비밀번호 조건 리스트 */
.wa-reqs {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: var(--ws-radius-10);
  background: var(--ws-bg-alt);
  font: 500 12px/1.6 var(--font-sans);
  color: var(--wa-text-sub);
}
.wa-reqs strong {
  font-weight: 700;
  color: var(--ws-text-neutral);
}
.wa-reqs ul {
  margin: 4px 0 0;
  padding-left: 16px;
}
.wa-reqs li.valid {
  color: var(--ws-positive);
}
.wa-reqs li.invalid {
  color: var(--ws-negative);
}

/* select를 wa-input과 동일 톤으로 */
select.wa-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2337383C' stroke-opacity='0.61' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* 읽기전용/비활성 입력 (소셜 계정 자동 정보) */
.wa-input:disabled,
.wa-input[readonly] {
  background: var(--ws-bg-alt);
  color: var(--wa-text-sub);
  cursor: not-allowed;
}

/* OAuth 제공자 배지 */
.wa-provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ws-bg-alt);
  padding: 8px 14px;
  border-radius: 999px;
  margin-top: 12px;
  font: 500 14px/20px var(--font-sans);
  color: var(--ws-text-neutral);
}

/* 필수 표시 */
.wa-req-star {
  color: var(--ws-negative);
  margin-left: 2px;
}

/* ── 반응형 ── */
@media (max-width: 480px) {
  .wa-page {
    padding: 24px 16px;
    align-items: flex-start;
  }
  .wa-card {
    padding: 28px 22px;
    border-radius: 18px;
  }
}