.account-recovery-grid{
  align-items:start;
}

.account-recovery-card{
  min-width:0;
}

.account-recovery-card[hidden],
.account-recovery-card [hidden]{
  display:none !important;
}

.account-recovery-form input:focus{
  border-color:var(--accent, var(--accent2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--soft, #E8F4F1) 68%, transparent);
}

.account-recovery-form input[aria-invalid="true"]{
  border-color:#B42318;
  box-shadow:0 0 0 3px rgba(180,35,24,.1);
}

.account-recovery-status{
  margin:0;
  padding:13px 14px;
  border:1px solid #B2DDFF;
  border-radius:8px;
  background:#EFF8FF;
  color:#175CD3;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
}

.account-recovery-status.is-error{
  border-color:#FDA29B;
  background:#FEF3F2;
  color:#B42318;
}

.account-recovery-status.is-success{
  border-color:#A6F4C5;
  background:#ECFDF3;
  color:#067647;
}

.account-recovery-links{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.account-recovery-restart{
  color:var(--accent, var(--accent2));
  font-size:14px;
  font-weight:800;
  text-align:center;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width: 640px){
  .account-recovery-card{
      padding:20px;
    }
}
/* ============================================================
   member_find.js 연동 클래스
   JS 가 붙이는 이름은 3몰 공용이라 고정. 색만 여기서 정한다
   ============================================================ */

/* ── 유형 선택 버튼 ── */
.type-btn {
  padding: 12px 8px;
  border: 1px solid var(--line, #D8DAD3);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #6B7378;
  cursor: pointer;
  transition: .15s;
}
.type-btn:hover { border-color: var(--accent); }

/* 활성 — JS 가 .is-active 만 갈아끼운다 */
.type-btn.is-active {
  border-color: var(--accent);
  background: var(--soft);
  color: var(--accent2);
}

/* ── 결과 박스 ──
   기존 .account-recovery-status 와 같은 모양. 이름만 JS 규격에 맞춤 */
.result-box {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #B2DDFF;
  border-radius: 8px;
  background: #EFF8FF;
  color: #175CD3;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}
.result-box.msg-ok  { border-color:#A6F4C5; background:#ECFDF3; color:#067647; }
.result-box.msg-err { border-color:#FDA29B; background:#FEF3F2; color:#B42318; }

/* 아이디 찾기 성공 시 두 줄 */
.result-box .found-id   { font-size: 19px; letter-spacing: .5px; }
.result-box .found-date { margin-top: 4px; font-weight: 400; font-size: 13px; color: #6B7378; }

/* ── 좌우 2단 ──
   한 화면에 다 보이게. 입력칸이 2~3개뿐이라 폭이 좁아도 문제없다 */
.account-recovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 767px) {
  .account-recovery-grid { grid-template-columns: 1fr; }
}

/* ── 회원 유형 선택 (양쪽 폼 위 공용) ── */
.recovery-type {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 20px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line, #D8DAD3);
  border-radius: 10px;
}
.recovery-type-label {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent2);
}
.recovery-type .type-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1 1 auto;
}

/* ── 카드 제목 ── */
.recovery-card-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--accent2);
}
.recovery-card-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6B7378;
}
.recovery-card-title + .account-recovery-form { margin-top: 16px; }

/* ── 하단 링크 ── */
.auth-foot .bar { margin: 0 8px; color: #C9CEC9; }

@media (max-width: 767px) {
  .recovery-type {
    display: block;
  }
  .recovery-type-label { display: block; margin-bottom: 10px; }
}