.registerWrap {margin: 0 auto 80px}
.registerWrap h1 {font-family: 'NEXONBold';font-size: 42px;text-align: center;margin-top: 80px}
.registerWrap .bt {text-align: center}
.registerWrap .bt button {background: var(--point);color: #ffffff;font-size: 16px}
.registerWrap .bt button:hover {background: var(--point-hover);color: #ffffff}

.registerWrap .bt button.g_color {background: #a0a0a0;color: #ffffff;font-size: 16px}
.registerWrap .bt button:hover.g_color {background: #868686;color: #ffffff}

.field_input button.btn-pw-change {background: var(--point);color: #ffffff;font-size: 13px;border: 0;height: 46px;width: 180px;border-radius: 25px;font-weight: 500}
.field_input button:hover.btn-pw-change {background: var(--point-hover);color: #ffffff}

.stepper {margin: 70px auto;}
.stepper ol{
	display:flex;
	justify-content: center; 
	gap: clamp(20px, 4vw, 50px);
	align-items:center;
	list-style:none;
	margin: 16px 0;
	padding: 0;
	counter-reset: step;
	width: auto;
}
.step {text-align: center;position: relative;}
.step__bubble{
	position: relative;
	z-index: 2;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display:grid;
	place-items:center;
	background: #eeeeee;          /* 기본 회색 원 */
	color: #B1B1B1;
	flex: 0 0 auto;
	font-size: 28px;
	font-family: 'Outfit';
	font-weight: 500;
}
.step__bubble::before {
	content: "";
	position: absolute;
	top: 50%;                  /* 버블 세로 가운데 */
	left: 100%;                 /* 이전 버블의 중심에서 현재 버블까지 */
	width: 100%;
	height: 1px;                /* 선 두께 */
	background: #D4D4D4;        /* 기본 회색 */
	transform: translateY(-50%);
	z-index: 0;                 /* 버블 뒤로 */
}

.step:last-child .step__bubble::before {content: none;}

/* 활성/완료 상태 */
.step.is-active .step__bubble,
.step.is-complete .step__bubble{background: var(--point);color: #fff;}
.step.is-active .step__label{ color: #000; font-weight:600; }
.step__label{color: #888888;font-size: 15px; line-height: 1.2;margin-top: 10px}


.register_box {margin-bottom: 60px}
.register_box .form-check {font-family: 'NEXONBold';}
.register_box .form-check.all {font-size: 22px;line-height: 1em}
.register_box .form-check.all small {font-family: 'NEXON';font-size: 16px}
.register_box .form-check small.ess {font-family: 'Noto Sans KR';font-weight:500;font-size: 14px;color: var(--check);}
.register_box .text {margin-top: 20px;font-size: 16px;color: #333;line-height: 1.6em;padding: 0 20px}
.register_box .innerTextBox {background:#FDFDFD;border:1px solid #DFDFDF;padding: 40px 50px;border-radius: 35px;margin: 10px auto;overflow: auto;position: relative;height: 260px;font-size: 15px;color: #666}
.register_box .innerTextBox h3 {font-size: 18px;font-family: 'NEXONBold';margin-bottom: 20px;color: #000}

.register_box .innerBox {background:#FDFDFD;border:1px solid #DFDFDF;padding: 40px 50px;border-radius: 35px;margin: 10px auto;position: relative;font-size: 16px;color: #666}
.register_box .innerBox h3 {font-size: 18px;font-family: 'NEXONBold';color: #000;margin-bottom: 40px}
.register_box .innerBox .inner {margin-top: 30px}
.register_box .innerBox .inner .radio_group{display: flex; justify-content: flex-end;align-items: center;gap: 14px;width: 100%;}


/* 의사번호 인증 */

.form-grid .field {margin-bottom: 20px;width: 49%;}
.field .field_label {width: 35%;text-align: right;padding-right: 12px;font-size: 16px;font-family: 'NEXONBold';}
.field .field_input {width: 65%}
.field .req{ color:var(--check); margin-right:4px; }
/* 인풋 */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"]{
  width:100%;
  background: #F7F7F7;
  border:1px solid #E4E4E4;
  border-radius: 15px;
  height: clamp(46px, 6.2vw, 48px);
  padding: 0 clamp(14px, 2vw, 20px);
  font-size: clamp(14px, 1.1vw, 16px);
  outline: none;
  transition: border-color .15s ease;
}
.field input:focus{ border-color: #7e7e7e; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-bd-focus) 20%, transparent); }

/* 읽기전용(회색 칩처럼) */
.field input[readonly]{
  background: #E4E4E4;
  color:#222; border-color: transparent;
  font-weight:600;
}

/* 빨간 테두리/문구 */
.field.is-error input {border:1px solid var(--err); box-shadow: 0 0 0 2px rgba(255,77,79,.15); }
.field .info-msg { margin-top: 8px; font-size: 13px; color: #626262; text-align: right;width: 100%}
.field .err-msg { margin-top: 8px; font-size: 13px; color: var(--err); text-align: right;width: 100%}
.alert_text {margin-top: -40px;padding: 0 30px;font-size: 15px;color: #333}

/* 가입완료 */
.complete_box {margin: 80px auto;background: #FDFDFD;border: 1px solid #DFDFDF;border-radius: 35px;padding: 90px 0 0;width:480px;text-align: center;}
.complete_box h3 {font-family: 'NEXONBold';fotn-size:30px;}
.complete_box .txt {font-size: 16px;color: #666666;}
.complete_box img {max-width: 100%}

.registerWrap .form-grid{
  display: flex;                 /* d-flex */
  justify-content: space-between;/* justify-content-between */
  align-items: flex-start;       /* align-items-start */
  flex-wrap: wrap;               /* flex-wrap */
  gap: 12px;                     /* 선택: 칸 사이 간격 */
}

/* 페이지 전용 토스트 (mp = mypage) */
.mp-toast{
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  transition: all .25s ease;
  padding: 10px 14px;
  border-radius: 10px;
  z-index: 9999;
  background: #111;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.mp-toast--ok { /* 필요 시 색상 유지 */ }
.mp-toast--err{ background:#b00020; }
.mp-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }

.field.is-saved .field_input input{outline:2px solid #1abc9c; box-shadow:0 0 0 3px rgba(26,188,156,.2);}
.kbtn.is-loading{position:relative; pointer-events:none;}
.kbtn.is-loading::after{content:'저장중…'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.55);}

/* 비밀번호 변경 모달 */
.pw-modal{position:fixed; inset:0; display:none; z-index:10000;}
.pw-modal.is-open{display:block;}
.pw-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.pw-modal__panel{
  position:relative; margin:8vh auto 0; width:min(92vw, 420px);
  background:#fff; border-radius:16px; padding:35px 25px; box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.pw-modal h3{font-family:'NEXONBold'; font-size:20px; margin:0 0 25px;text-align: center;}
.pw-err{font-size:13px; color:var(--err); margin-top:6px; min-height:16px;margin-bottom: 15px}
.pw-actions{margin-top:12px;width: 100%;text-align: center}
.pw-actions button {background: #757575;color: #ffffff;font-size: 13px;border: 0;height: 46px;width: 45%;border-radius: 25px;font-weight: 500;margin: 0 5px}

  .reauthWrap{max-width:520px;margin:40px auto;background:#FDFDFD;border:1px solid #DFDFDF;border-radius:24px;padding:45px 40px}
  .reauthWrap h1{font-size:20px;margin:0 0 16px;font-family:'NEXONBold';text-align: center}
  .reauthWrap p{color:#666;margin:0 0 16px;text-align: center;font-size: 14px}
  .reauthWrap .field{display:flex;align-items:center;gap:12px;margin:16px 0}
  .reauthWrap .field_label{flex:0 0 120px;text-align:right}
  .reauthWrap .field_input{flex:1}
  .reauthWrap input[type="password"]{width:100%;height:44px;border:1px solid #E4E4E4;border-radius:12px;padding:0 14px;background:#F7F7F7}
  .reauthWrap .err{color:#ff4d4f;margin:8px 0 0;text-align:center;font-size: 13px}
  .reauthWrap .btns{text-align: center;margin-top:20px}
  
@media (max-width:650px){
  .registerWrap .bt button.g_color {font-size: 14px}
  
  .registerWrap {margin: 0 auto 60px}
  .registerWrap h1 {font-family: 'NEXONBold';font-size: 32px;text-align: center;margin-top: 80px}
  
  .stepper {margin: 50px auto;}
  .stepper ol{
    display:flex;
    justify-content: center; 
    gap: clamp(20px, 4vw, 50px);
    align-items:center;
    list-style:none;
    margin: 16px 0;
    padding: 0;
    counter-reset: step;
    width: auto;
  }
  .step {text-align: center;position: relative;}
  .step__bubble {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display:grid;
    place-items:center;
    background: #eeeeee;          /* 기본 회색 원 */
    color: #B1B1B1;
    flex: 0 0 auto;
    font-size: 20px;
    font-family: 'Outfit';
    font-weight: 500;
    margin: 0 auto;
  }
  .step__bubble::before {
    content: "";
    position: absolute;
    top: 50%;                  /* 버블 세로 가운데 */
    left: 100%;                 /* 이전 버블의 중심에서 현재 버블까지 */
    width: 100%;
    height: 1px;                /* 선 두께 */
    background: #D4D4D4;        /* 기본 회색 */
    transform: translateY(-50%);
    z-index: 0;                 /* 버블 뒤로 */
  }
  .step__bubble img {width: 24px}
  
  /* 활성/완료 상태 */
  .step.is-active .step__bubble,
  .step.is-complete .step__bubble{background: var(--point);color: #fff;}
  .step.is-active .step__label{ color: #000; font-weight:600; }
  .step__label{color: #888888;font-size: 13px; line-height: 1.2;margin-top: 10px}
  
  .register_box {margin-bottom: 40px}
  .register_box .form-check {font-family: 'NEXONBold';}
  .register_box .form-check.all {font-size: 18px;line-height: 1em}
  .register_box .form-check.all small {font-family: 'NEXON';font-size: 13px}
  .register_box .form-check small.ess {font-family: 'Noto Sans KR';font-weight:500;font-size: 13px;color: var(--check);}
  .register_box .text {margin-top: 20px;font-size: 13px;color: #333;line-height: 1.6em;padding: 0 20px}
  .register_box .innerTextBox {background:#FDFDFD;border:1px solid #DFDFDF;padding: 30px 30px;border-radius: 35px;margin: 10px auto;overflow: auto;position: relative;height: 260px;font-size: 13px;color: #666}
  .register_box .innerTextBox h3 {font-size: 15px;font-family: 'NEXONBold';margin-bottom: 20px;color: #000}
  
  .register_box .innerBox {background:#FDFDFD;border:1px solid #DFDFDF;padding: 30px;border-radius: 35px;margin: 10px auto;position: relative;font-size: 16px;color: #666}
  .register_box .innerBox h3 {font-size: 14px;font-family: 'NEXONBold';color: #000;margin-bottom: 20px}
  .register_box .innerBox .inner {margin-top: 30px;font-size: 13px;}
  .register_box .innerBox .inner .radio_group{display: flex; justify-content: flex-end;align-items: center;gap: 14px;width: 100%;margin-top: 10px}
  
  /* 의사번호 인증 */
  
  .form-grid .field {margin-bottom: 20px;width:100%;}
  .field .field_label {width: 35%;text-align: right;padding-right: 12px;font-size: 13px;font-family: 'NEXONBold';}
  .field .field_input {width: 65%}
  .field .req{ color:var(--check); margin-right:4px; }
  /* 인풋 */
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="tel"]{
    width:100%;
    background: #F7F7F7;
    border:1px solid #E4E4E4;
    border-radius: 15px;
    height: clamp(46px, 6.2vw, 48px);
    padding: 0 clamp(14px, 2vw, 20px);
    font-size: clamp(14px, 1.1vw, 16px);
    outline: none;
    transition: border-color .15s ease;
  }
  .field input:focus{ border-color: #7e7e7e; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-bd-focus) 20%, transparent); }
}