/* ============================================================
   kidsrun 리디자인 — 공개 인증 화면(비밀번호 찾기 등) 전용 CSS
   Figma 8a1yDvW.. / 11550:98009·99338·99579
   토큰·리셋·폰트는 redesign.css 공통(.rd-body) 재사용. 접두사 au-.
   selector 를 .rd-auth 로 감싸 redesign.css 의 button 리셋 특이도를 이긴다.
   ============================================================ */

.rd-auth-body{background:#f6f8fc;}
.rd-auth{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;}

/* 배경 일러스트(구름) — 좌하단 고정, 옅게 */
/* SVG 원본이 width/height=100%(퍼센트)라 img 고유높이가 0 → aspect-ratio 로 박스높이 강제 */
.rd-auth .au-cloud{position:absolute;left:0;top:-24px;width:100%;min-width:1600px;
  aspect-ratio:1888/1444;height:auto;opacity:1;z-index:0;pointer-events:none;}

/* 본문 — 브랜드 + 카드 2단, 중앙 정렬 */
.rd-auth .au-main{position:relative;z-index:1;flex:1;display:flex;align-items:center;
  justify-content:center;padding:60px 40px 100px;}
.rd-auth .au-inner{width:100%;max-width:1080px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:60px;}
.rd-auth .au-brand{margin-top:180px;}/* 시안: 브랜드가 카드 상단보다 아래(탭 높이)에서 시작 */

/* ---------- 좌측 브랜드 ---------- */
.rd-auth .au-brand{flex:0 0 364px;width:364px;display:flex;flex-direction:column;gap:60px;}
.rd-auth .au-brand-top{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.rd-auth .au-wordmark{width:156px;height:41px;object-fit:contain;} /* 시안 kidsrun_logo 3 */
.rd-auth .au-tagline{font-family:var(--rd-round);font-size:22px;line-height:1.3;color:#545c68;}
.rd-auth .au-title{display:flex;flex-direction:column;gap:6px;line-height:1.3;color:#545c68;
  font-family:var(--rd-round);font-weight:800;}
.rd-auth .au-title .t1{font-size:40px;}
.rd-auth .au-title .t2{font-size:44px;}

.rd-auth .au-back-card{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:30px;border:1px dashed #b5b5b5;border-radius:20px;}
.rd-auth .au-back-txt{font-family:var(--rd-sans);font-size:15px;color:#545c68;}
.rd-auth .au-back-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border:1px solid #297bff;border-radius:10px;
  font-family:var(--rd-round);font-weight:800;font-size:12px;letter-spacing:-.12px;color:#297bff;}
.rd-auth .au-back-btn:hover{background:rgba(41,123,255,.06);}

/* ---------- 우측 카드 ---------- */
.rd-auth .au-card{flex:0 0 600px;width:600px;max-width:100%;background:#fff;
  border:1px solid #e1e5ec;border-radius:22px;padding:53px;
  display:flex;flex-direction:column;gap:32px;
  box-shadow:0 0 3px rgba(0,0,0,.08),0 7px 10px rgba(0,0,0,.07);}
.rd-auth .au-card-hd{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.rd-auth .au-card-tit{font-family:var(--rd-round);font-weight:800;font-size:24px;color:#545c68;line-height:1;}
.rd-auth .au-card-sub{font-family:var(--rd-sans);font-size:13px;letter-spacing:-.32px;color:#757575;}

/* ---------- 스텝 인디케이터 ---------- */
/* 스텝퍼 — 시안(11550:98009): 점·라벨 중앙정렬, 아웃라인 원(활성=파란 링+점),
   연결선은 점 중심끼리 연결, 카드 안쪽 여백 두고 배치 */
.rd-auth .au-steps{display:flex;align-items:flex-start;padding:0 36px;}
.rd-auth .au-step{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;align-items:center;}
.rd-auth .au-step-top{display:flex;align-items:center;justify-content:center;height:20px;width:100%;position:relative;}
.rd-auth .au-dot{flex:0 0 20px;width:20px;height:20px;border-radius:1000px;
  display:flex;align-items:center;justify-content:center;z-index:2;background:#fff;}
.rd-auth .au-dot.before{border:1.5px solid #d6dce6;}
.rd-auth .au-dot.ing{border:1.5px solid #297bff;}
.rd-auth .au-dot.ing::after{content:"";width:7px;height:7px;border-radius:1000px;background:#297bff;}
.rd-auth .au-dot.done{background:#297bff;border:1.5px solid #297bff;}
.rd-auth .au-dot.done::after{content:"";width:5px;height:9px;margin-bottom:2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.rd-auth .au-line{position:absolute;left:calc(50% + 12px);right:calc(-50% + 12px);top:9px;height:2px;background:#e9edf4;z-index:1;}
.rd-auth .au-line.done{background:#297bff;}
.rd-auth .au-step-lab{display:flex;flex-direction:column;gap:2px;line-height:1.4;align-items:center;text-align:center;}
.rd-auth .au-step-lab .n{font-family:var(--rd-sans);font-size:13px;color:#545c68;}
.rd-auth .au-step-lab .t{font-family:var(--rd-sans);font-weight:700;font-size:15px;color:#22262c;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rd-auth .au-divider{height:1px;width:100%;background:#e8ebf0;}

/* ---------- 폼 ---------- */
.rd-auth .au-form{display:flex;flex-direction:column;gap:20px;}
.rd-auth .au-field{display:flex;flex-direction:column;gap:8px;}
.rd-auth .au-label{font-family:var(--rd-sans);font-weight:700;font-size:15px;color:#545c68;}
.rd-auth .au-hint{font-family:var(--rd-sans);font-size:13px;line-height:1.5;color:#545c68;}
.rd-auth .au-input-box{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;
  background:#fff;border:1px solid #abb9c6;border-radius:6px;}
.rd-auth .au-input-box:focus-within{border-color:#297bff;}
.rd-auth .au-input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font-family:var(--rd-sans);font-size:17px;color:#22262c;letter-spacing:0;}
.rd-auth .au-input::placeholder{color:#b7c0cf;}
.rd-auth .au-eye{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;
  justify-content:center;color:#8491a7;}
.rd-auth .au-eye .off{display:none;}
.rd-auth .au-eye.is-off .on{display:none;}
.rd-auth .au-eye.is-off .off{display:block;}

.rd-auth .au-notice{background:rgba(41,123,255,.05);border:1px solid rgba(41,123,255,.4);
  border-radius:8px;padding:17px 28px;font-family:var(--rd-sans);font-size:13px;line-height:1.4;color:#22262c;}
.rd-auth .au-error{background:#fde8e8;border:1px solid #f5c6c6;border-radius:8px;
  padding:12px 16px;font-family:var(--rd-sans);font-size:13px;line-height:1.4;color:#d64545;}

/* ---------- 액션 버튼 ---------- */
.rd-auth .au-actions{display:flex;flex-direction:column;gap:10px;}
.rd-auth .au-cta{display:flex;align-items:center;justify-content:center;width:100%;
  padding:15px 30px;border-radius:14px;font-family:var(--rd-round);font-weight:800;
  font-size:16px;letter-spacing:-.32px;color:#fff;}
.rd-auth .au-cta.blue{background:#297bff;}
.rd-auth .au-cta.blue:hover{background:#1f6ff0;}
.rd-auth .au-cta.gray{background:#8491a7;}
.rd-auth .au-cta.gray:hover{background:#76839a;}

/* ---------- 배선 include(레거시 _invite-modal / _social-buttons) 지원 ----------
   redesign 페이지는 app.css 를 싣지 않으므로, 재사용 include 가 쓰는
   토큰(--primary 등)·버튼 클래스만 여기서 최소 정의(모달·소셜은 signup/terms 공용). */
:root{--primary:#297bff;--muted:#8491a7;--border:#dfe4ec;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font-family:var(--rd-round);font-weight:800;font-size:14px;line-height:1;text-decoration:none;}
.btn-primary{background:#297bff;color:#fff;}
.btn-primary:hover{background:#1f6ff0;}
.btn-line{background:#fff;border-color:#cfd6e2;color:#545c68;}
.btn-line:hover{background:#f6f8fc;}

/* 에러 배너 · 소셜 본인확인 배지(회원가입·약관 공용) */
.rd-auth .su-alert{border-radius:8px;padding:12px 16px;font-family:var(--rd-sans);
  font-size:13px;line-height:1.4;}
.rd-auth .su-alert.err{background:#fde8e8;border:1px solid #f5c6c6;color:#d64545;}
.rd-auth .su-alert.ok{background:#e8f6ee;border:1px solid #bfe6cd;color:#1f8a4c;}

/* ---------- 푸터 ---------- */
.rd-auth .au-foot{position:relative;z-index:1;padding:20px 30px;}
.rd-auth .au-foot p{font-family:var(--rd-sans);font-size:13px;letter-spacing:-.32px;color:#919db1;
  white-space:pre-wrap;margin:0;}

/* ---------- 반응형 ---------- */
@media (max-width:920px){
  .rd-auth .au-inner{flex-direction:column;gap:40px;max-width:600px;}
  .rd-auth .au-brand{flex:none;width:100%;align-items:center;text-align:center;gap:28px;}
  .rd-auth .au-brand-top{align-items:center;}
  .rd-auth .au-back-card{width:100%;}
  .rd-auth .au-card{flex:none;width:100%;}
  .rd-auth .au-cloud{display:none;}
}
@media (max-width:560px){
  .rd-auth .au-main{padding:32px 18px 80px;}
  .rd-auth .au-card{padding:32px 22px;gap:24px;}
  .rd-auth .au-title .t1{font-size:32px;}
  .rd-auth .au-title .t2{font-size:36px;}
  .rd-auth .au-step-lab{padding-right:8px;}
  .rd-auth .au-step-lab .t{font-size:14px;}
}