/* ============================================================
   kidsrun 리디자인 — 회원가입 화면 전용 CSS (개인/기업 탭)
   Figma 8a1yDvW.. / 11550:98181(개인) · 11550:98717(기업)
   공통 셸·입력·CTA·푸터는 redesign-auth.css(au-) 재사용.
   여기엔 회원가입에만 있는 요소(단계뱃지·탭토글·번호섹션·초대/파일드롭·
   소셜가입·셀렉트·액션row)만 추가. 접두사 su-.
   selector 를 .rd-auth 로 감싸 특이도 확보(redesign-auth.css 와 동일).
   ============================================================ */

/* ---------- 카드 헤더(단계 뱃지 + 타이틀 + 부제) ---------- */
.rd-auth .su-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.rd-auth .su-head-l{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.rd-auth .su-badge{display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px 8px;border:1px solid #b1b1b1;border-radius:4px;
  font-family:var(--rd-round);font-size:12px;line-height:1;color:#5a5a5a;}
.rd-auth .su-title{font-family:var(--rd-round);font-weight:800;font-size:24px;color:#545c68;line-height:1;}
.rd-auth .su-sub{font-family:var(--rd-sans);font-size:13px;letter-spacing:-.32px;color:#757575;}

/* ---------- 개인/기업 탭 토글 ---------- */
.rd-auth .su-toggle{display:flex;gap:4px;align-items:center;height:52px;padding:4px;
  background:#f6f8fc;border:1px solid #e9edf4;border-radius:12px;}
.rd-auth .su-tab{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;
  padding:0 20px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;
  font-family:var(--rd-round);font-weight:700;font-size:14px;color:#919db1;}
.rd-auth .su-tab.is-active{background:#fff;border-color:#e9edf4;font-weight:800;color:#2b2f34;}

/* ---------- 탭 패널 ---------- */
.rd-auth .su-panel{display:flex;flex-direction:column;gap:32px;width:100%;}
.rd-auth .su-panel[hidden]{display:none;}

/* ---------- 번호 붙은 섹션 헤더 ---------- */
.rd-auth .su-group{display:flex;flex-direction:column;gap:20px;width:100%;}
.rd-auth .su-sec{display:flex;align-items:center;gap:8px;}
.rd-auth .su-sec-no{flex:0 0 26px;width:26px;height:26px;border-radius:4px;background:#545c68;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--rd-round);font-weight:800;font-size:13px;color:#fff;}
.rd-auth .su-sec-t{font-family:var(--rd-round);font-weight:800;font-size:19px;
  letter-spacing:-.32px;color:#545c68;}
.rd-auth .su-fields{display:flex;flex-direction:column;gap:20px;width:100%;}

/* ---------- 셀렉트 박스 ---------- */
.rd-auth .su-select{width:100%;height:48px;padding:0 44px 0 16px;
  border:1px solid #abb9c6;border-radius:6px;background-color:#fff;
  font-family:var(--rd-sans);font-size:17px;color:#22262c;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238491a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;}
.rd-auth .su-select:focus{outline:0;border-color:#297bff;}
.rd-auth .su-select.is-placeholder{color:#b7c0cf;}
.rd-auth .su-region{display:flex;gap:10px;width:100%;}
.rd-auth .su-region .su-select{flex:1;min-width:0;}

/* ---------- 기관 이름(검색 아이콘 붙은 입력) ---------- */
.rd-auth .au-search{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;
  justify-content:center;color:#8491a7;}

/* ---------- 사업자등록증 파일 드롭 ---------- */
.rd-auth .su-drop{display:flex;align-items:center;justify-content:center;gap:16px;
  height:60px;padding:0 27px;background:#f6f8fc;border:1px dashed #bec3ce;border-radius:6px;
  cursor:pointer;font-family:var(--rd-sans);font-size:17px;color:#b7c0cf;}
.rd-auth .su-drop svg{flex:0 0 20px;color:#8491a7;}

/* 업로드된 파일 칩 */
.rd-auth .su-filechip{display:flex;align-items:center;gap:16px;width:100%;
  padding:10px 16px;background:#fff;border:1px solid #e9edf4;border-radius:8px;}
.rd-auth .su-filechip .nm{flex:1;min-width:0;font-family:var(--rd-sans);font-size:15px;color:#121417;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rd-auth .su-chip-del{display:inline-flex;align-items:center;gap:2px;height:24px;padding:2px;
  border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer;
  font-family:var(--rd-sans);font-size:15px;color:#22262c;}
.rd-auth .su-chip-del svg{width:16px;height:16px;}

/* 사업자등록번호(자동입력·비활성 예시) */
.rd-auth .au-input-box.is-disabled{background:#e9edf4;border-color:#d8dee9;}
.rd-auth .au-input-box.is-disabled .au-input{color:#545c68;-webkit-text-fill-color:#545c68;}

/* ---------- 소셜 가입 ---------- */
.rd-auth .su-sns{display:flex;flex-direction:column;gap:8px;width:100%;}
.rd-auth .su-sns-hd{display:flex;align-items:center;gap:6px;padding-bottom:10px;}
.rd-auth .su-sns-hd::before,.rd-auth .su-sns-hd::after{content:"";flex:1;height:1px;background:#e1e5ec;}
.rd-auth .su-sns-hd span{font-family:var(--rd-round);font-weight:800;font-size:14px;
  letter-spacing:-.32px;color:#545c68;white-space:nowrap;}
.rd-auth .su-social{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:16px 18px;border-radius:8px;cursor:pointer;
  font-family:var(--rd-sans);font-weight:700;font-size:15px;letter-spacing:-.32px;}
.rd-auth .su-social .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;}
/* Figma SVG가 width/height=100%(퍼센트)라 img가 버튼 폭으로 늘어남 → span 크기로 고정 */
.rd-auth .su-social .ico img{display:block;width:100%;height:100%;}
.rd-auth .su-social.naver{background:#03c75a;color:#fff;}
.rd-auth .su-social.naver .ico{width:16px;height:16px;}
.rd-auth .su-social.google{background:#fff;border:1px solid #747775;color:#1f1f1f;}
.rd-auth .su-social.google .ico{width:18px;height:18px;}

/* ---------- 소셜 가입(_social-buttons.jsp include 스타일) ---------- */
.rd-auth .social-list{display:flex;flex-direction:column;gap:8px;width:100%;}
.rd-auth .btn-social{position:relative;display:flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;padding:16px 18px;border-radius:8px;border:1px solid transparent;
  font-family:var(--rd-sans);font-weight:700;font-size:15px;letter-spacing:-.32px;text-decoration:none;}
.rd-auth .btn-social .social-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;}
.rd-auth .btn-social--naver{background:#03c75a;color:#fff;}
.rd-auth .btn-social--google{background:#fff;border-color:#747775;color:#1f1f1f;}
.rd-auth .btn-social--kakao{background:#fee500;color:#191600;}

/* ---------- 기관 검색 위젯(공공데이터) ---------- */
.rd-auth .su-search-btn{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;
  justify-content:center;color:#8491a7;background:transparent;border:0;cursor:pointer;}
.rd-auth .su-results{max-height:200px;overflow:auto;border:1px solid #e9edf4;border-radius:8px;margin-top:6px;}
.rd-auth .su-result{padding:9px 12px;border-bottom:1px solid #eef1f6;cursor:pointer;
  font-family:var(--rd-sans);font-size:14px;color:#22262c;}
.rd-auth .su-result:last-child{border-bottom:0;}
.rd-auth .su-result:hover{background:#f6f8fc;}
.rd-auth .su-result .sub{color:#8491a7;font-size:12px;}
.rd-auth .su-selected{display:flex;align-items:center;gap:6px;background:#e8f6ee;border:1px solid #bfe6cd;
  border-radius:8px;padding:10px 12px;margin-top:8px;font-family:var(--rd-sans);font-size:14px;color:#1f8a4c;}
.rd-auth .su-selected a{color:#297bff;margin-left:auto;}
.rd-auth .su-hint-link a{color:#297bff;}

/* include·동적요소 숨김 헬퍼(플렉스 컨텍스트에서도 확실히) */
.rd-auth [hidden]{display:none!important;}

/* ---------- 하단 액션(취소/다음으로 2단 가로) ---------- */
.rd-auth .su-actions{display:flex;gap:10px;width:100%;}
.rd-auth .su-actions .au-cta{flex:1;width:auto;}

@media (max-width:560px){
  .rd-auth .su-title{font-size:22px;}
}