/*공통*/
.login, .join{display: flex; justify-content: center; align-items: flex-start;  margin-top: 50px;}
.auth{width: 100%; max-width: 430px; margin: 24px auto; text-align: center;}


/*로그인*/
.login{flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 16px;}
.logo {text-align: center;}
.logo h1{ margin-bottom: 14px; }
.logo span{ color: #555; }
.login_form{ margin-top: 46px; }
.form_row{margin: 10px 0; text-align: left;}

.input{ width: 100%;  display: block; border: 1px solid #ccc; border-radius: 8px; padding: 16px 20px; font-size: 16px; outline: none; background: #fff;}
.input:focus{border-color: #0095B8; box-shadow: 0 0 0 3px rgba(0,149,184,.15);}
.field_row{ display: flex; gap: 10px; align-items: center;}
.password_wrap{ position: relative; }
.password_wrap .input{ padding-right: 46px; }
.btn_icon{border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0;}
.password_wrap .btn_pw_toggle{position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;}
.password_wrap .btn_pw_toggle img{width: 22px; height: 22px; display: block;}
.btn_pw_toggle:focus-visible{outline: 3px solid rgba(0,149,184,.35); outline-offset: 2px; border-radius: 6px;}
.btn_cta_st1{ width: 100%;}
.login_links{margin-top: 24px; font-size: 13px; color: #555;}
.login_links a{padding: 8px 12px; font-size: 15px;}
.login_links .sep{ color:#c9c9c9; }
.caution {width: 100%;}


/*회원가입*/
legend, .legend {background: #F4F4F4; font-weight: 600; display: block; width: 100%; padding: 14px 20px; box-sizing: border-box; border-radius: 6px; text-align: left; line-height: 1.5rem;}
.type_panel[hidden] {display: none !important;}
.member_type {display: flex; padding: 0;}
label.member_type input {margin-right: 10px; width: 24px;}
.member_type label{position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 8px;}
.member_type input{position: absolute; opacity: 0; pointer-events: none;}
.member_type span{display: inline-flex; align-items: center; gap: 8px;}

.member_type span::before{content: ""; width: 22px; height: 22px; border: 1px solid #999; box-sizing: border-box; background: #fff; flex-shrink: 0;}
.member_type input[type="radio"] + span::before{border-radius: 50%;}
.member_type input:checked + span::before{ background-color: #fff;}

.member_type input[type="radio"]:checked + span::after{content: ""; position: absolute; left: 13px; top: 19px; width: 12px; height: 12px; background: #0095B8; border-radius: 50%;}

.member_type input:focus-visible + span::before{outline: 3px solid rgba(0,149,184,.35); outline-offset: 2px;}
.btn_sq_line {padding: 16px 12px}
.join {position: relative; margin-bottom: 80px;  padding: 24px 16px;}
.join .form_wrap {border: 1px solid #ccc; padding: 24px 18px; border-radius: 10px; margin: 30px 0 60px;}

.join_actions {position: absolute; bottom: 0; left:50%; width: calc(100% - 32px); max-width: 288px; margin-left: -144px;}
.join_actions button {display: block;}
.join_actions2 {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: absolute; bottom: 0; left: 50%; margin-left: -150px;}
.success_id {display: block; margin-top: 30px;}

.form_row li {padding: 30px 7px 0;}
.form_row .id_wrap {display: grid; grid-template-columns: 1fr 90px;}
.form_row .grade_wrap input {width: 80px;}
.form_row label {margin-bottom: 10px; display: block; font-weight: 600;}
.form_row .help {margin-top: 12px;}

.form_row select{border: 1px solid #ccc; padding: 16px 20px; border-radius: 6px; width: 100%; display: block; box-sizing: border-box; font-size: 16px; background: url(/images/uce/common/family_arrow.svg) no-repeat 95%;}

.agree_item label {margin-bottom: 0;}
.agree_item {border: 1px solid #ccc; border-radius: 8px; padding: 14px 12px;}
.agree_header {display: flex; align-items: center; justify-content: space-between; gap: 8px;}

.agree_toggle {display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 0; cursor: pointer; font-size: 14px; color: #555;}
.toggle_icon {display: inline-block; transition: transform 0.2s ease;}
.agree_toggle[aria-expanded="true"] .toggle_icon {transform: rotate(90deg);}
.agree_content {margin-top: 12px; font-size: 14px; line-height: 1.6; color: #555;}

.choice {display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative;}

.choice input {position: absolute; opacity: 0; pointer-events: none;}
.choice span {position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 14px;}
.choice span::before {content: ""; width: 22px; height: 22px; border: 1px solid #999; box-sizing: border-box; background: #fff; border-radius: 50%; flex-shrink: 0;}

.choice input[type="checkbox"] + span::after {content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 5px; border: 3px solid #ccc; border-top: 0; border-right: 0; transform: rotate(-45deg);}
.choice input[type="checkbox"]:checked + span::before {border-color: #0095B8; background-color: #0095B8;}
.choice input[type="checkbox"]:checked + span::after {border-color: #fff; opacity: 1;}
.choice input[type="radio"] + span::after {content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; background: #0095B8; border-radius: 50%; opacity: 0; }

.choice input[type="radio"]:checked + span::after {opacity: 1;}
.choice input[type="radio"]:checked + span::before {border-color: #0095B8;}
.choice input:focus-visible + span::before {outline: 3px solid rgba(0,149,184,.35); outline-offset: 2px;}

.year14 {background: #f1f6ff; border-radius: 10px; margin-top: 20px; padding: 10px 20px !important; line-height: 1.5rem;}
.year14 .field_row {display: block; margin-top: 30px;}
.year14 .field_row select {background: #fff url(/images/uce/common/family_arrow.svg) no-repeat 95%;}
.u14_auth_grid {display: flex; gap: 10px; margin: 20px auto; }
.u14_auth_card {border-radius: 10px; display: block; padding: 10px; background: #fff; width: 100%; text-align: center;}
.u14_auth_card img {width: 50px;}
.u14_bottom_agree {margin-top: 20px;}



@media (min-width: 1024px){

  html, body { height: 100%; }
  body{min-height: 100vh; display: flex; flex-direction: column;}
  header, footer{ flex: 0 0 auto; }
  header {display: block;}  
  .login, .join{align-items: center;}
  .join {margin: 90px 0;}
  .auth{margin: 0 auto;}

  
  .join_actions {position: absolute; margin-left: initial;  margin-left: -144px;}


}


@media (max-width:460px){


  .join_actions2 .button {padding: 16px 28px;}

  .join .form_wrap {margin-bottom: 30px;}
}