/* 공통 */
.account_contents {width: 100%; min-width: 1000px; max-width: 1000px;}
.account_box {border-top: 2px solid #F79300; }
.account_btn, .account_white_btn, .login_btn {font-family: inherit; display: flex; justify-content: center; align-items: center; margin-top: 10px; padding: 14px; background: #F79300; color: #fff; font-size: 20px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; width:100%; }
.account_btn, .account_white_btn {width: 200px; height: 50px;}
.account_btn:hover, .login_btn:hover {background: #d45f28; }
.btn_box {display: flex; justify-content: center; gap: 10px; }
.account_white_btn {background: #fff; border: 1px solid #ccc; color: #222; }
.account_white_btn:hover {background: #666; color: #fff; border-color: transparent; }
.check_btn:hover {background: #222; }

/* 로그인 */
.login_contents {width: 100%; max-width: 520px;}
.login_box {margin: 0 auto; }
.login_form {display: flex; flex-direction: column; gap: 16px; margin: 20px 0;}
.form_group input { width: 100%; padding: 14px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; outline: none; transition: border-color 0.2s;}
.form_group input:focus { border-color: #f7941e;}
.login_options {display: flex; justify-content: flex-end; gap: 10px; font-size: 14px; color: #666;}
.login_options a {color: #888;}

/* 이메일 찾기 */
.account_table {width: 100%; margin-bottom: 50px;}
.account_table th {background: #f8f8f8; padding: 15px; font-size: 18px; font-weight: 600; text-align: left; border-bottom: 1px solid #ccc; width: 16%;}
.account_table td {padding: 15px; border-bottom: 1px solid #ccc; font-size: 18px; width: 34%;}
.account_table #name { width: 100%; background: none; }
.birth_selects, .phone_inputs {display: flex; gap: 4px; align-items: center;}
.birth_selects select option, .phone_inputs select option { color: #222; }
.required {color: #f00; margin-right: 4px; vertical-align:middle; }
.account_table input[type="text"], .account_table select {height: 40px; padding: 0 12px; font-size: 16px; color: #aaa; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; box-sizing: border-box; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.account_table select { background-color: #fff; background-image: url('../../../images/thema/sub/arrow.svg'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.account_table input:focus, .account_table select:focus { border-color: #f7941e; outline: none; }
.email_notice {width: 100%; font-size: 18px; color: #707070; padding: 20px; background: #FBFBFB; border: 1px solid #ccc; border-radius: 10px; }
.email_notice ul li { line-height: 1.8; }
.result_wrap { margin: 0 auto; text-align: center; border-bottom: 1px solid #ccc; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.result_message { font-size: 20px; color: #707070; line-height: 1.6; margin: 50px auto 35px; }

.radio_box {width: 100%; max-width: 500px; background: #FBFBFB; padding: 30px; border: 1px solid #ccc; border-radius: 10px; margin-bottom: 50px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;}
.radio_box label {font-size: 18px; cursor: pointer;}

/* 비밀번호 찾기 */
.email_inputs {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.email_inputs input[type="text"], .email_inputs select {height: 40px; padding: 0 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; box-sizing: border-box; }
.email_inputs input[type="text"] {flex: 1; }
.email_inputs select {color: #222; background: #fff url('../images/sub/board/arrow.svg') no-repeat right 12px center; background-size: 12px; appearance: none; }
.email_at {font-size: 16px; font-weight: bold; }
.check_btn {height: 40px; padding: 0 16px; font-size: 14px; font-weight: bold; border: none; border-radius: 8px; background-color: #888; color: #fff; cursor: pointer; flex-shrink: 0; transition: ease .3s; }

/* 회원가입 step01 */
.step_indicator {display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 40px; }
.step {width: 180px; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 50px; background: #fff; color: #666; font-size: 18px; }
.step_indicator i {font-size: 40px; color: #ccc; }
.step.active {background: #f7941e; color: #fff; border-color: #f7941e; }
.step_arrow {display: flex; align-items: center; font-weight: bold; color: #aaa; }
.terms_section {display: flex; width: 100%; flex-direction: column; gap: 40px; margin-bottom: 40px; border-top: 2px solid #F79300; padding-top: 45px; }
.terms_box h3 {font-size: 24px; font-weight: 700; margin-bottom: 12px; vertical-align: top; }
.dot {color: #f7941e; margin-right: 6px; }
.textarea_wrap {border: 1px solid #ccc; border-radius: 12px; overflow: hidden; margin-bottom: 40px; }
.textarea_wrap pre {width: 100%; max-height: 270px; padding: 30px; border: none; resize: none; font-size: 18px; line-height: 1.6; color: #333; background: #fafafa; box-sizing: border-box; font-family: inherit; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; }
.agree_checkbox {display: flex; align-items: center; padding: 20px 40px; font-weight: 700; font-size: 18px; border-top: 1px solid #ccc; }
.agree_checkbox input[type="checkbox"] {margin-right: 10px; accent-color: #296d94; width: 18px; height: 18px;}
.btn_group {display: flex; justify-content: center; gap: 20px; margin-bottom: 100px;margin-top:50px}
.btn {padding: 10px; border: none; border-radius: 8px; font-weight: bold; font-size: 18px; cursor: pointer; border: 1px solid #ccc; width: 18%; text-align: center; display: flex; justify-content: center; align-items: center; transition: background 0.2s ease; margin-bottom: 20px; font-family: 'Noto Sans KR', sans-serif;}
.btn.gray {background: #eee; color: #333;}
.btn.orange {background: #f7941e; color: #fff; border: transparent;}

/*회원가입 step02*/
.account_table input[type="password"] {width: 100%; height: 40px; padding: 0 12px; font-size: 16px; color: #aaa; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; box-sizing: border-box;}
.account_table input:focus {border-color: #f7941e; outline: none;}

.address_box {display: flex; flex-wrap: wrap; gap: 8px;}

.address_box input[type="text"] {height: 40px; padding: 0 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; font-family: inherit; box-sizing: border-box; flex: 1;}

.address_box input.readonly_input {background: #f0f0f0; color: #666; cursor: not-allowed;}

.address_box input.readonly_input::placeholder {color: #aaa;}
.address_box .address_num {width: 100px; flex: none !important;}

.gender_box {display: flex; gap: 8px;}

.gender_box input[type="radio"] {display: none;}

.gender_box label {padding: 8px 25px; border: 1px solid #ccc; border-radius: 999px; background: #fff; color: #666; font-weight: 500; font-size: 16px; cursor: pointer; transition: all 0.2s ease;}

.gender_box input[type="radio"]:checked + label {background: #e6f0ff; border-color: #3391ff; color: #3391ff; font-weight: 600;}

.find-notice{width:100%; margin:0 auto 40px; background:#f5f5f5; box-sizing:border-box; padding:20px;}
.find-notice2{max-width:800px;}
.find-notice ul li{font-size:13px; color:#333; line-height:26px; text-indent:-0.8em; margin-left:0.8em;}

/*회원가입 step03*/
#email03 .account_box {border: none;}
.complete_box {max-width: 670px; width: 100%; text-align: center; border: 1px solid #ccc; border-radius: 16px; padding: 50px 30px; margin: 0 auto; }

.complete_icon {width: 70px; height: 70px; background: #FFB74B; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;}
.complete_icon .ri-check-fill {color: #fff; font-size: 40px;}
.complete_title {font-size: 24px; font-weight: 700; margin: 30px 0;}
.complete_desc {font-size: 18px; }

/*2025.07.07. 신규추가*/
.input_detail {padding: 10px; border: 1px solid #ccc; border-radius: 6px;}
.input100 {width: 100%; max-width: 100px;}
.input200 {width: 100%; max-width: 200px;}
.input230 {width: 100%; max-width: 230px;}

.input_detail.input300 {width: 100%; max-width: 300px; font-size: 18px;}

.btn.w13 {width: 12%;}

.btn.w_btn {background: #fff;}
.btn.w_btn:hover {background: #666; color: #fff; border-color: transparent;}
.btn.org_btn {background: #f7941e; color: #fff; border: transparent;}
.btn.org_btn:hover {background: #d45f28;}
.btn.gray_btn {background: #666; color: #fff; font-size: 18px; border: none;}
.btn.gray_btn:hover {background: #222;}

.btn_grop.right {display: flex; justify-content: flex-end;}

.account_table2 {width: 100%; margin-bottom: 50px;}
.account_table2 th {background: #f8f8f8; padding: 15px; font-size: 18px; font-weight: 600; text-align: left; border-bottom: 1px solid #ccc; width: 12%;}
.account_table2 td {padding: 15px; border-bottom: 1px solid #ccc; font-size: 18px; width: 34%;}

.account_table2 input:focus, .account_table2 select:focus {border-color: #f7941e; outline: none;}
.ft-red.table-ps {color: #E14434; margin-left: 10px;}

/*2025.07.08. 신규추가 회원탈퇴*/
.withdraw.wrap {display: flex; flex-direction: column;}
.withdraw.notice {text-align: center; font-size: 20px; border-top: 2px solid #f7941e; padding-top: 40px;}
.withdraw.notice2 {border: 1px solid #ccc; margin-top: 40px; padding: 40px; background: #fbfbfb; border-radius: 20px;}
.withdraw.notice2 h3 {margin-bottom: 10px; font-size: 20px;}
.withdraw.w_bg {background: #fff; }

.withdraw.list {font-size: 16px;}
.withdraw.list li {display: flex; align-items: center; margin: 0 0 5px 10px;}
.radio-txt {margin-left: 10px; font-size: 18px;}

.btn.link {width: 100%; margin: 0 0 0 10px; padding: 5px; max-width: 14.5em; font-size: 14px; font-weight: 400;}
.ri-external-link-line {margin-left: 8px;}
.input_left {margin-left: 10px;}
.input_m {margin: 0 10px;}
.input_style.small {height: 35px;}
.input800 {width: 100%; max-width: 800px;}

.agree_text {font-size: 18px;}
.agree_wrap {display: flex; align-items: center; padding: 40px 0 20px;}

.input_check {margin-right: 10px; accent-color: #296d94; width: 18px; height: 18px;}
.pw_check {display: flex; align-items: center; font-size: 18px; padding: 20px 0 40px; margin-bottom: 40px; border-bottom: 1px solid #ccc; }
.pw_check p {color: #f00;}

.input_detail:focus {border-color: #f7941e; outline: none;}

@media (max-width: 1024px) {
  .account_table, .account_table tbody, .account_table tr, .account_table th, .account_table td {display: block; width: 100%;}

  .account_table td {border: none;}

  .email_inputs, .birth_selects, .phone_inputs, .address_box {flex-wrap: wrap; gap: 8px;}

  .email_inputs input, .email_inputs select, .phone_inputs input, .phone_inputs select, .birth_selects select,
  .address_box input, .address_box button {width: 100% !important;}

  .check_btn {width: 100%; text-align: center;}

  .btn_group .btn {width: 50%;}
  .address_box input[type="text"] {flex: none;}
  .address_box .check_btn {order: 1;}
  .address_box .address_num {order: 2;}
  .address_box .address_detail1 {order: 3;}
  .address_box .address_detail2 {order: 4;}

  #join .account_table th {border-top: 1px solid #ccc;}
  #join .account_table tr:first-child th {border-top: none;}
  #join .account_table tr:last-child {border-bottom: 1px solid #ccc;}
  
  .account_contents {width: 100%; min-width: 0;}
  .account_table2, .account_table2 tbody, .account_table2 tr, .account_table2 th {display: block; width: 100%;}
  .account_table2 td {width: 100%; display: flex; flex-direction: column;}
  
  .input_detail.input300, .input_detail.input800 {max-width: 100%;}
  .ft-red.table-ps {margin: 10px 0 0; font-size: 16px;}
  
  .withdraw.list li {flex-wrap: wrap;}
  .btn.link {margin: 10px 0;}

  
}

@media screen and (max-width: 768px) {
  .step_indicator {width: 100%; flex-direction: column; gap: 0;}
  .ri-arrow-drop-right-line {transform: rotate(90deg);}
  
  .btn.m28 {width: 28%;}
  
  .withdraw.notice2 {padding: 30px;}
  .withdraw.list li .input_detail {margin-top: 10px;}
  
  .agree_text {font-size: 16px;}
  .pw_check {flex-wrap: wrap;}
  .pw_check p {margin-top: 10px; font-size: 16px;}
}

@media screen and (max-width: 560px) {
  .input230 {max-width: 100%; margin: 10px 0;}
}