@charset "utf-8";

body{
  background-color: #f5f5f5 !important;
}
/* ### 기본 스타일 커스터마이징 시작 ### */
/* 기본박스 */
.mbskin {
  position: relative;
  margin: 70px auto 0;
  max-width: 450px !important;
  text-align: center;
  padding: 0 20px;
}
.mbskin .mbskin_box {
}
.mbskin .frm_input {
  width: 100%;
}
.mbskin .btn_submit {
  width: 100%;
  margin: 10px 0 0;
  height: 45px;
  font-weight: bold;
  font-size: 1.25em;
}
.mbskin h1 {
  margin: 60px 0 30px;
  font-size: 2em;
}


/* ### 기본 스타일 커스터마이징 끝 ### */


#reg_mb_icon,
#reg_mb_img {
  float: right;
}

/* 회원가입 완료 */
#reg_result {
  padding: 40px 30px;
  text-align: center;
  background: #edf3fc;
  border: 1px solid #d6e2f4;
  border-radius: 5px;
}
#reg_result h2 {
  font-size: 2em;
  margin: 0 0 20px;
}
#reg_result h2 strong {
  color: #ed6478;
}
#reg_result #result_email {
  margin: 20px 0;
  padding: 10px 50px;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #dde4e9;
  background: #fff;
  line-height: 2em;
}
#reg_result #result_email span {
  display: inline-block;
}
#reg_result #result_email strong {
  color: #e8180c;
  font-size: 1.2em;
}
#reg_result p {
  line-height: 1.8em;
}
#reg_result .result_txt {
  text-align: left;
}
#reg_result .btn_confirm {
  margin: 50px 0;
}
#reg_result i {
  font-size: 3em;
}
#reg_result .reg_result_p {
  font-size: 1.25em;
  margin: 0 0 10px;
  color: #3684fa;
}

.btn_confirm_reg {
  margin: 20px 0;
  text-align: center;
}
.reg_btn_submit {
  display: inline-block;
  background: #3a8afd;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  width: 280px;
  height: 57px;
  line-height: 57px;
  font-size: 1.2em;
  margin: 0 auto;
  font-weight: bold;
}

.join_wrap{
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
}

.mb_log_cate h2 {
  width: 50%;
  float: left;
  padding: 20px 0;
  text-align: center;
}
.mb_log_cate .join {
  width: 50%;
  float: left;
  padding: 20px 0;
  text-align: center;
  background: #f7f7f7;
  color: #6e6e6e;
}
.mb_log_cate:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}

.tooltip_icon {
  display: inline-block;
  vertical-align: baseline;
  color: #b3b5b8;
  border: 0;
  font-size: 1.4em;
  background: transparent;
  cursor: pointer;
}
.tooltip_icon:hover {
  color: #448bf5;
}
.tooltip {
  position: absolute;
  width: auto;
  color: #fff;
  background: #000;
  padding: 10px;
  font-size: small;
  line-height: 18px;
  display: none;
  z-index: 9;
  font-weight: normal;
  margin-left: 15px;
  margin-top: 10px;
}
.tooltip:before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 0px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 0;
  border-right: 10px solid #000;
}

/* 아이디/비밀번호 찾기 */
#find_info h3 {
  display: none;
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.1em;
}
#find_info .new_win_con {
  background: #f7f7f7;
}
#find_info.cert .new_win_con {
  width: 460px;
  float: left;
}
#find_info.cert .new_win_con:nth-child(2) {
  margin-left: 10px;
}
#find_info.cert h3 {
  display: block;
}
#find_info #mb_hp_label {
  display: inline-block;
  margin-left: 10px;
}
#find_info p {
  line-height: 1.5em;
}
#find_info #mb_email {
  margin: 10px 0;
}
#find_info .find_btn .btn_submit {
  width: 30%;
  word-break: keep-all;
}

/* 비밀번호 재설정 */
#pw_reset #info_fs {
  margin-bottom: 10px;
}
#pw_reset .frm_input {
  margin: 10px 0 0;
}

/* 기존 회원 본인인증 */
#member_cert_refresh p {
  position: relative;
  text-align: center;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-size: 1.1em;
  background: #f2838f;
  margin: 0 0 10px;
  border-radius: 5px;
  font-weight: bold;
}
#member_cert_refresh p:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 50px;
  border-radius: 5px 0 0 5px;
  background: #da4453;
}
#member_cert_refresh p i {
  font-size: 1.2em;
  vertical-align: middle;
}
#member_cert_refresh section {
  margin: 10px auto 15px;
  border: 1px solid #dde7e9;
  position: relative;
  border-radius: 3px;
}
#member_cert_refresh_chkall {
  position: relative;
  text-align: center;
  background: #f5f7fa;
  line-height: 50px;
  border: 1px solid #e5e9f0;
  border-radius: 3px;
  margin-bottom: 15px;
}
#member_cert_refresh h2 {
  text-align: left;
  padding: 20px;
  border-bottom: 1px solid #dde7e9;
  font-size: 1.2em;
}
#member_cert_refresh textarea {
  display: block;
  padding: 20px;
  width: 100%;
  height: 150px;
  background: #fff;
  border: 0;
  line-height: 1.6em;
}
#member_cert_refresh_private {
  position: relative;
}
#member_cert_refresh_private div {
  padding: 20px;
  background: #fff;
}
#member_cert_refresh_private table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
}
#member_cert_refresh_private table caption {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#member_cert_refresh_private table th {
  background: #f7f7f9;
  width: 33.33%;
  color: #000;
  padding: 10px;
  border: 1px solid #d8dbdf;
  font-weight: bold;
}
#member_cert_refresh_private table td {
  border: 1px solid #e7e9ec;
  padding: 10px;
  border-top: 0;
}

.member_cert_refresh_agree {
  position: absolute;
  top: 0;
  right: 0;
}
.member_cert_refresh_agree input[type="checkbox"] + label {
  color: #676e70;
}
.member_cert_refresh_agree input[type="checkbox"] + label:hover {
  color: #2172f8;
}
.member_cert_refresh_agree input[type="checkbox"] + label span {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 17px;
  height: 17px;
  display: block;
  background: #fff;
  border: 1px solid #999;
  border-radius: 3px;
}
.member_cert_refresh_agree input[type="checkbox"]:checked + label {
  color: #000;
}
.member_cert_refresh_agree input[type="checkbox"]:checked + label span {
  background: url("./img/chk.png") no-repeat 50% 50% #3a8afd;
  border-color: #1471f6;
  border-radius: 3px;
}
.member_cert_refresh_agree.chk_all input[type="checkbox"] + label span {
  top: 18px;
}

#member_cert_refresh #find_info {
  margin: 50px 0;
}
#member_cert_refresh #find_info .find_btn {
  padding: 10px 20px;
  background: #fff;
}
#member_cert_refresh #find_info .find_btn > div {
  margin: 10px 0;
}

/* 로그인 */

@font-face {
  font-family: "GangwonEdu_OTFBoldA";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Chosunilbo_myungjo";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.login_head {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
.login_logo {
  display: flex;
  justify-content: flex-start;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3))
}
.login_head_title {
  margin: 20px 0;
  font-size: 2em;
  line-height: 1.4;
  text-align: left;
  font-weight: bold;
}

.login_logo img {
  height: 70px;
  width: auto;
}

#mb_login {
  font-family: var(--font-main);
}

#mb_login input,
#mb_login button,
#mb_login label,
#mb_login p,
#mb_login a,
#mb_login h1,
#mb_login h2,
#mb_login h3,
#mb_login span {
  font-family: var(--font-main);
}



#mb_login h1 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#login_fs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 35px;
  box-shadow: 30px 30px 70px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  background-color: #fff;
}
#mb_login #login_fs .frm_input {
  font-size: 15px;
  width: 100%;
  text-indent: 15px;
  height: 48px;
  background-color: #f1f1f1;
  border: 0px;
  border-radius: 4px;
}
#mb_login #login_fs .btn_submit {
  margin: 0 0 15px;
}

#login_info {
}
#login_info:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#login_info .login_if_auto {
  float: left;
}
#login_info .login_if_auto label {
  vertical-align: baseline;
  padding-left: 5px;
}
#login_info .login_if_lpl {
  float: right;
}
#login_password_lost {
  display: inline-block;
  border: 1px solid #d5d9dd;
  color: #3a8afd;
  border-radius: 2px;
  padding: 2px 5px;
  line-height: 20px;
}

#mb_login_notmb {
  margin: 30px auto;
  padding: 20px 30px;
  border: 1px solid #dde7e9;
}
#mb_login_notmb h2 {
  font-size: 1.25em;
  margin: 20px 0 10px;
}
#guest_privacy {
  border: 1px solid #ccc;
  text-align: left;
  line-height: 1.6em;
  color: #666;
  background: #fafafa;
  padding: 10px;
  height: 150px;
  margin: 10px 0;
  overflow-y: auto;
}
#mb_login_notmb .btn_submit {
  display: block;
  text-align: center;
  line-height: 45px;
}

#mb_login_od_wr {
  margin: 30px auto;
  padding: 20px 30px;
  border: 1px solid #dde7e9;
}
#mb_login_od_wr h2 {
  font-size: 1.25em;
  margin: 20px 0 10px;
}
#mb_login_od_wr .frm_input {
  margin: 10px 0 0;
}
#mb_login_od_wr p {
  background: #f3f3f3;
  margin: 20px 0 0;
  padding: 15px 20px;
  line-height: 1.5em;
}

#mb_login #sns_login {
  margin-top: 50px;
  border-top: 1px solid #edeaea;
  padding-top: 20px;
}
#mb_login #sns_login:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#mb_login #sns_login h3 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#mb_login #sns_login .sns-wrap {
  margin: 0 !important;
  display: flex;
  gap: 10px;
  justify-content: center;
}
#mb_login #sns_login .sns-icon {
}
#mb_login #sns_login .sns-icon:nth-child(odd) {
}
#mb_login #sns_login .txt {
  font-size: 0.95em;
  padding-left: 5px !important;
  border-left: 0 !important;
}

/* 쪽지 */
.memo_list {
  border-top: 1px solid #ececec;
}
.memo_list li {
  border-bottom: 1px solid #ececec;
  background: #fff;
  padding: 10px 15px;
  list-style: none;
  position: relative;
}
.memo_list li:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.memo_list li.read {
  background: #f6f6f6;
}
.memo_list li.empty_li {
  text-align: center;
  padding: 20px 0;
  color: #666;
}

.memo_list .memo_li {
  float: left;
}
.memo_list .profile_big_img {
  position: relative;
  margin-right: 15px;
}
.memo_list .profile_big_img img {
  border-radius: 50%;
  width: 52px;
  height: 52px;
}
.memo_list .memo_li.memo_name {
  padding-top: 5px;
  float: none;
}
.memo_list .memo_preview a {
  display: block;
  margin-right: 30px;
  padding-top: 10px;
  font-weight: normal !important;
  font-size: 1.2em;
}
.memo_list .memo_preview a:hover {
  text-decoration: underline;
}
.memo_list .memo_name a,
.memo_list .memo_name .sv_wrap {
  font-weight: bold;
}
.memo_list .no_read {
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  background: #3a8afd;
  border: 1px solid #e1edff;
  text-indent: -9999px;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 10px 3px #9ec3f9;
}
.memo_list .no_read {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#memo_list h1#win_title {
  padding: 10px 10px 10px 20px;
}
#memo_list .memo_datetime {
  font-size: 0.92em;
  color: #888d92;
}
#memo_list .memo_del {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 10px;
  color: #c7c9cb;
  font-size: 1.4em;
}
#memo_list .memo_cnt {
  margin-top: 5px;
  font-weight: normal;
  display: inline-block;
  font-size: 1.2em;
}
#memo_list .pg_wrap {
  margin-top: 10px;
  width: 100%;
  float: inherit;
  text-align: center;
}

#memo_view_contents {
  margin-bottom: 20px;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
#memo_view_contents h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#memo_view_ul {
  margin: 0;
  list-style: none;
  background: #f6f6f6;
}
#memo_view_ul:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.memo_view_li {
  position: relative; /*padding:10px;float:left;width:50%*/
}

.memo_view_li .profile_img img {
  display: none;
}
.memo_from {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #ececec;
  padding: 15px 20px;
}
.memo_from li {
  float: left;
}
.memo_from li.memo_profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.memo_from li:first-child {
  margin-right: 10px;
}
.memo_from li.memo_view_nick {
  width: 80%;
}
.memo_from li.memo_view_nick a {
  font-weight: bold !important;
}
.memo_from li.memo_view_date {
  display: block;
  color: #555;
  line-height: 24px;
}
.memo_from li.memo_op_btn {
  position: absolute;
}
.memo_from li.list_btn {
  right: 53px;
}
.memo_from li.del_btn {
  right: 15px;
}
.memo_from:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}

.memo_btn {
  width: 100%;
}
.memo_btn a {
  display: inline-block;
  width: 50%;
  font-size: 1em;
  color: #888d92;
  padding: 20px;
}
.memo_btn a.btn_right {
  float: right;
  text-align: right;
}
.memo_btn a i {
  font-size: 1.2em;
  color: #acabab;
  vertical-align: bottom;
}

#memo_view p {
  padding: 10px;
  min-height: 150px;
  height: auto !important;
  height: 150px;
  background: #fff;
  line-height: 1.8em;
}
#memo_view textarea {
  height: 100px;
}

#memo_write .form_01 {
  padding: 20px;
  border-top: 1px solid #ececec;
}

.reply_btn {
  display: inline-block;
  width: 150px;
  height: 45px;
  line-height: 50px;
  padding: 0 10px;
  font-weight: bold;
  background: #3a8afd;
  color: #fff;
  border-radius: 3px;
  vertical-align: bottom;
  margin-right: 5px;
}
#memo_write .reply_btn {
  font-size: 1em;
}

/* 스크랩 */
#scrap li:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#scrap li {
  position: relative;
  padding: 20px;
  border-bottom: 1px solid #ececec;
}
#scrap .scrap_tit {
  font-weight: bold;
  display: block;
  font-size: 1.083em;
  margin-bottom: 10px;
  line-height: 1.3em;
}
#scrap .scrap_cate {
  float: left;
  display: block;
  color: #ac92ec;
  background: #eeeaf8;
  padding: 3px;
  border-radius: 3px;
  font-size: 0.92em;
  margin-right: 10px;
}
#scrap .scrap_datetime {
  color: #777;
  line-height: 18px;
}
#scrap .scrap_del {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 18px;
  color: #c7c9cb;
}
#scrap .scrap_del:hover {
  color: #3a8afd;
}

#scrap_do .new_win_con {
  padding: 0 20px;
}
#scrap_do textarea {
  width: 100%;
  height: 100px;
}
#scrap_do .scrap_tit {
  margin-bottom: 10px;
  background: #f3f3f3;
  padding: 10px 15px;
  font-size: 1.2em;
  font-weight: bold;
}
#scrap_do label {
  display: block;
  margin: 0 0 5px;
  font-size: 1em;
}
#scrap_do .win_btn:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#scrap .win_btn,
#scrap_do .win_btn {
  margin: 20px 0;
  text-align: center;
}
#scrap_do .win_btn .btn_submit {
  float: inherit;
}
#scrap_do .win_desc {
  margin: 0 20px;
}

/*포인트*/
#point {
  text-align: center;
}
#point h1 {
  text-align: left;
}
#point .point_all {
  margin: 20px 20px 15px;
  border-radius: 5px;
  background: #edf3fc;
  border: 1px solid #d6e2f4;
  color: #485172;
  font-size: 1.083em;
}
#point .point_all:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#point .point_all li {
  float: left;
  width: 50%;
  padding: 20px;
  text-align: left;
}
#point .point_all li span {
  float: right;
  color: #485172;
  font-weight: bold;
}
#point .point_all li:last-child {
  border-left: 1px solid #d6e2f4;
}
#point .point_all .full_li {
  width: 100%;
  border-bottom: 1px solid #d6e2f4;
  text-align: left;
}
#point .point_all .full_li span {
  color: #000;
  font-weight: bold;
  font-size: 1.2em;
}
#point .point_status {
  background: #737373;
  border: 0;
  color: #fff;
  font-weight: bold;
  font-size: 1.083em;
  text-align: left;
}
#point .point_status:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#point .point_status span {
  margin-left: 10px;
  float: right;
}

.point_list {
}
.point_list li:first-child {
  border-top: 1px solid #ececec;
}
.point_list li {
  border-bottom: 1px solid #ececec;
  background: #fff;
  padding: 15px;
  list-style: none;
  position: relative;
}
.point_list li:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}

.point_list .point_use {
  background: #f6f6f6;
}
.point_list .point_use .point_num {
  font-size: 1.25em;
  color: #ff4f76;
  font-weight: bold;
  float: right;
}
.point_list .point_num {
  font-size: 1.25em;
  color: #3a8afd;
  font-weight: bold;
  position: absolute;
  right: 15px;
  top: 25px;
}
.point_list .point_top {
  line-height: 15px;
  margin: 0 0 5px;
}
.point_list .point_top:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.point_list .point_tit {
  font-weight: bold;
  float: left;
  font-size: 1.083em;
  display: block;
}
.point_list .point_date1 {
  float: left;
  color: #888d92;
}
.point_list .point_date {
  float: left;
  color: #888d92;
}
.point_list .txt_expired {
  color: red;
  margin-left: 5px;
}

#point .pg_wrap {
  width: 100%;
  float: inherit;
  text-align: center;
}
#point .btn_close {
  margin: 20px auto;
}

/* 회원 비밀번호 확인 */
#mb_confirm {
}
#mb_confirm h1 {
  margin: 60px 0 30px;
  font-size: 2em;
}
#mb_confirm p {
  padding: 0 20px 40px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 1.083em;
  line-height: 1.4em;
  color: #656565;
}
#mb_confirm p strong {
  display: block;
  color: #3ca1ff;
  font-size: 1.167em;
  margin: 0 0 5px;
}
#mb_confirm fieldset {
  padding: 50px;
  text-align: left;
}
#mb_confirm fieldset .frm_input {
  background-color: #fff !important;
}
#mb_confirm label {
  letter-spacing: -0.1em;
}
#mb_confirm_id {
  display: block;
  margin: 5px 0 10px;
  font-weight: bold;
}
#mb_confirm .confirm_id {
  font-size: 0.92em;
  color: #666;
}

/* 비밀글 비밀번호 확인 */
#pw_confirm h1 {
  margin: 60px 20px 30px;
  font-size: 2em;
}
#pw_confirm p {
  padding: 0 20px 40px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 1.083em;
  line-height: 1.4em;
  color: #656565;
}
#pw_confirm p strong {
  display: block;
  color: #3ca1ff;
  font-size: 1.167em;
  margin: 0 0 5px;
}
#pw_confirm fieldset {
  padding: 50px;
  text-align: center;
}
#pw_confirm fieldset .frm_input {
  background-color: #fff !important;
}
#pw_confirm label {
  letter-spacing: -0.1em;
}
#pw_confirm_id {
  display: inline-block;
  margin-right: 20px;
  font-weight: bold;
}
#mb_confirm_id {
}

/* 폼메일 */
#formmail textarea {
  height: 100px;
}
#formmail .formmail_flie {
  position: relative;
}
#formmail .formmail_flie .file_wr {
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  vertical-align: middle;
  border-radius: 3px;
  padding: 5px;
  height: 40px;
  margin: 0;
}
#formmail .lb_icon {
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 3px 0 0 3px;
  height: 38px;
  line-height: 38px;
  width: 40px;
  background: #fff;
  text-align: center;
  color: #b2b2b2;
}
#formmail .frm_file {
  padding-left: 50px;
}
#formmail .frm_info {
  color: #3497d9;
  font-size: 0.92em;
}
.chk_box {
  position: relative;
}
.chk_box input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  outline: 0;
  z-index: -1;
  overflow: hidden;
}
.chk_box input[type="radio"] + label {
  position: relative;
  padding-left: 23px;
  display: inline-block;
  color: #676e70;
}
.chk_box input[type="radio"] + label span {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  display: block;
  background: #f7f8f9;
  border: 1px solid #cdd6df;
  border-radius: 50%;
}
.chk_box input[type="radio"]:checked + label {
  color: #3a8afd;
}
.chk_box input[type="radio"]:checked + label span {
  border-color: #3a8afd;
}
.chk_box input[type="radio"]:checked + label span:before {
  width: 7px;
  height: 7px;
  background: #3a8afd;
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
}
.chk_box input[type="checkbox"] + label {
  position: relative;
  color: #676e70;
}
.chk_box input[type="checkbox"] + label:hover {
  color: #2172f8;
}
.chk_box input[type="checkbox"] + label span {
  float: left;
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  border: 1px solid #d0d4df;
  border-radius: 3px;
}
.chk_box input[type="checkbox"]:checked + label {
  color: #000;
}
.chk_box input[type="checkbox"]:checked + label span {
  background: url(./img/chk.png) no-repeat 50% 50% #3a8afd;
  border-color: #1471f6;
  border-radius: 3px;
}
.selec_chk {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  outline: 0;
  z-index: -1;
  overflow: hidden;
}

/* 자기소개 */
#profile h1 a {
}
#profile table {
  margin-bottom: 0;
}
#profile table th {
  text-align: left;
  padding: 10px;
  width: 100px;
}
#profile section {
  color: #6794d3;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  margin: 10px 0;
}
#profile h2 {
  margin: 0 0 5px;
}
#profile .profile_name {
  text-align: center;
  font-weight: bold;
}
#profile .my_profile_img {
  display: block;
  margin: 20px 0 5px;
}
#profile .my_profile_img img {
  border-radius: 50%;
}
#profile .profile_img img {
  border-radius: 50%;
}
#profile .profile_name .sv_wrap {
  font-weight: bold;
  text-align: left;
}


/* ===== Modern Register UI v2 (drop-in override) ===== */

/* 페이지 컨테이너 */
.register{
  max-width: min(var(--layout-width), 1080px);
  margin: 48px auto;
  padding: 0 var(--layout-padding);
  font-family: var(--font-main);
  color: var(--color-text);
}

/* 상단 안내: 배너 → 톤다운/선명한 대비 + 아이콘 정렬 */
#fregister > p{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; margin:0 0 18px; padding:10px 18px;
  border-radius:14px; font-weight:700; font-size:1.05rem; line-height:1.3;
  color:#fff; background: linear-gradient(180deg, var(--color-main), #b38405);
  box-shadow: 0 10px 24px rgba(0,0,0,.07);
}
#fregister > p i{ font-size:1.1em; opacity:.95 }

/* 섹션(약관/개인정보) 카드 */
#fregister section{
  border:1px solid rgba(0,0,0,.06);
  background:#fff; border-radius:16px; overflow:hidden;
  margin:16px 0 18px; transition: box-shadow var(--nav-t) var(--nav-ease);
}
#fregister section:hover{ box-shadow:0 12px 32px rgba(0,0,0,.06) }

/* 카드 헤더 */
#fregister h2{
  margin:0; padding:18px 20px;
  display:flex; align-items:center; gap:12px;
  font-size:1.12rem; font-weight:800;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* ✅ 더 견고한 체크박스 표시 (마스크/그라디언트 제거 버전) */

/* 라벨 안의 네모칸이 기준점이 되도록 */
.fregister_agree label span,
#fregister_chkall label span{
  position: relative; /* <-- 이것이 중요! ::after 기준 */
  display: inline-block;
}

/* 체크됐을 때 배경/테두리 */
.fregister_agree input[type="checkbox"]:checked + label span,
#fregister_chkall input[type="checkbox"]:checked + label span{
  border-color: var(--color-main);
  background: var(--color-main);
}

/* 체크 마크: 테두리로 만든 V자 (브라우저 호환성 최고) */
.fregister_agree input[type="checkbox"]:checked + label span::after,
#fregister_chkall input[type="checkbox"]:checked + label span::after{
  content: "";
  position: absolute;
  /* span 크기에 맞춰 중앙쯤에 V자 놓기 */
  left: 50%;
  top: 50%;
  width: 6px;         /* 기본 20~22px 박스에 어울리는 두께/길이 */
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
  /* 터치에서 살짝 더 선명하도록 */
  box-shadow: 0 0 0 0.5px rgba(255,255,255,.2);
}

/* (선택) span 크기가 22px인 전체동의 박스는 체크마크를 살짝 키움 */
#fregister_chkall label span{
  width: 22px;
  height: 22px;
}
#fregister_chkall input[type="checkbox"]:checked + label span::after{
  width: 7px;
  height: 13px;
  border-width: 2.2px;
}

.fregister_agree,
#fregister_chkall { position: relative; } /* 기준 잡기 */

.fregister_agree input[type="checkbox"],
#fregister_chkall input[type="checkbox"]{
  position: absolute;      /* 화면 안에 둔다! */
  inset: 0 auto auto 0;    /* 부모 좌상단에 고정 */
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;              /* 보이지 않게 */
  pointer-events: none;    /* 클릭은 라벨이 받는다 */
  /* 접근성 보강(스크린리더 배려) */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  border: 0;
  white-space: nowrap;
}


/* 본문(약관 텍스트) — textarea를 카드 안 '스크롤 박스'처럼 */
#fregister textarea{
  display:block; width:100%; min-height:240px; resize:vertical;
  padding:18px 20px; border:0; background:#fff; line-height:1.7;
  white-space:pre-wrap; font-size:.97rem; color:#2b2b2b;
  /* 스크롤박스 느낌 */
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
#fregister textarea::-webkit-scrollbar{ height:10px; width:10px }
#fregister textarea::-webkit-scrollbar-thumb{
  background:#d6dbe3; border-radius:8px;
}
#fregister textarea:focus{ outline:2px solid rgba(200,154,6,.25) }

/* 전체동의 박스 — 카드 외 독립 강조 */
#fregister_chkall{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:14px 16px; border-radius:14px;
  background: linear-gradient(180deg, #f6f8fb, #eef3f9);
  border:1px solid rgba(0,0,0,.05); font-weight:800;
}
#fregister_chkall input[type="checkbox"]{ position:absolute; left:-9999px }
#fregister_chkall label{ display:flex; align-items:center; gap:10px; cursor:pointer;  }
#fregister_chkall label span{
  width:22px; height:22px; border-radius:8px;
  border:1.4px solid #9aa4af; background:#fff; transition:.18s;
}
#fregister_chkall input:checked + label span{
  border-color: var(--color-main); background: var(--color-main);
}

/* 버튼 세트 — 좌/우 균형 + 미묘한 음영 */
.register .btn_confirm{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;
}
.register .btn_confirm .btn_close,
.register .btn_confirm .btn_submit{
  height:52px !important; border-radius:12px;
  font-weight:800; font-size:1.05rem; letter-spacing:.01em;
  transition: transform .08s ease, filter .18s ease;
}
.register .btn_confirm .btn_close{
  background:#fff; color:#222;
  border:1px solid rgba(0,0,0,.08);
}
.register .btn_confirm .btn_submit{
  background: var(--color-main); color:#fff; border:1px solid var(--color-main);
  box-shadow: 0 10px 22px rgba(200,154,6,.25);
  font-family: var(--font-main);
}
.register .btn_confirm a:hover,
.register .btn_confirm button:hover{ filter:brightness(.97) }
.register .btn_confirm a:active,
.register .btn_confirm button:active{ transform: translateY(1px) }

/* 작은 캡션 스타일 (필요 시 <small> 사용) */
.register small.caption{
  display:block; margin-top:6px; color:#6b7280; font-size:.86rem;
}

/* 포커스 접근성 */
.register a:focus, .register button:focus, .register input:focus, .register textarea:focus{
  outline:2px solid rgba(4,157,217,.35); outline-offset:2px;
  border-radius:10px;
}

/* 모바일 최적화 */
@media (max-width: 640px){
  .register{ margin:28px auto }
  #fregister h2{ padding:16px; font-size:1.02rem }
  #fregister textarea{ min-height:200px; padding:14px 16px }
  .register .btn_confirm{ grid-template-columns:1fr }
}

#register_form{
  max-width: min(var(--layout-width), 1080px);
    margin: 48px auto;
    padding: 0 var(--layout-padding);
    font-family: var(--font-main);
    color: var(--color-text);
}

/* 섹션 카드 공통 */
#register_form .register_form_inner {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 18px 0;
  box-shadow: 0 8px 26px rgba(0,0,0,.05);
}
#register_form .register_form_inner h2 {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: 1.12rem;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* UL → 카드 내부 폼 레이아웃 */
#register_form .register_form_inner > ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}

/* 라벨 + 툴팁 */
#register_form label {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; margin-bottom: 8px;
}
.tooltip_icon { 
  background: transparent; border: 0; padding: 0;
  color: var(--color-main); cursor: pointer;
}
.tooltip {
  display: none;
  position: relative;
  margin-left: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid rgba(0,0,0,.06);
  color: #3a4048;
  font-weight: 500;
  line-height: 1.5;
}

/* 인풋 공통 */
.frm_input,
#register_form textarea {
  width: 100%;
  height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e3e8ef;
  background: #fff;
  font-size: 0.97rem;
  transition: border var(--nav-t) var(--nav-ease), box-shadow var(--nav-t) var(--nav-ease);
}
#register_form textarea {
  height: auto; min-height: 120px; resize: vertical; line-height: 1.6;
}
.frm_input:focus,
#register_form textarea:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(200,154,6,.18);
}

/* 반쪽/그리드 입력 */
.half_input { display: grid; }
@media (min-width: 720px) {
  .register_form_inner ul {
    grid-template-columns: 1fr 1fr;
  }
  .register_form_inner ul > li { grid-column: span 2; }
  .register_form_inner ul > li.half_input { grid-column: span 1; }
  .margin_input { margin-right: 0; }
}
@media (max-width: 719.98px) {
  .register_form_inner ul { grid-template-columns: 1fr; }
}

/* 메시지(중복확인 등) */
#msg_mb_id, #msg_mb_nick, #msg_mb_email {
  display: block; margin-top: 6px; font-size: .9rem;
}
#msg_mb_id.bad, #msg_mb_nick.bad, #msg_mb_email.bad { color: #c0392b; }
#msg_mb_id.good, #msg_mb_nick.good, #msg_mb_email.good { color: #1b8f3a; }

/* 버튼류 (본인확인/주소검색) */
.btn_frmline, .win_sa_cert {
  height: 40px; padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #dce3ec;
  background: #fff;
  font-weight: 700;
}
.btn_frmline:hover, .win_sa_cert:hover { filter: brightness(.98); }

/* 주소 묶음 라인 간격 */
.frm_address { margin-top: 8px; }

/* 커스텀 체크박스(메일링/SMS/정보공개) — 스크롤 점프 없는 접근성 패턴 */
.chk_box { display: flex; gap: 10px; }
.chk_box input[type="checkbox"]{
  position: absolute;
  width:1px; height:1px; margin:0; padding:0; opacity:0; pointer-events:none;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; border: 0; white-space: nowrap;
}
.chk_box label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.chk_box label span{
  position: relative; width: 20px; height: 20px; border-radius: 6px;
  border: 1.2px solid #9aa4af; background: #fff; display: inline-block; transition: .18s;
}
.chk_box input[type="checkbox"]:checked + label span{
  border-color: var(--color-main); background: var(--color-main);
}
.chk_box input[type="checkbox"]:checked + label span::after{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:12px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}
.chk_li { font-weight: 600; }

/* 파일 입력 라인 */
.reg_mb_img_file img,
#reg_mb_icon ~ img {
  display:block; margin:10px 0; border-radius: 10px; border:1px solid #e9eef5;
}

/* 캡차 영역 */
.is_captcha_use {
  display: grid; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px dashed rgba(0,0,0,.06);
}

/* 하단 버튼들 */
.register + .btn_confirm,
.register .btn_confirm {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 18px;
}
.btn_close, .btn_submit {
  height: 52px !important; border-radius: 12px; font-weight: 800; font-size: 1.05rem;
  transition: transform .08s ease, filter .18s ease;
}
.btn_close {
  background: #fff; color: #222; border: 1px solid rgba(0,0,0,.08);
}
.btn_submit {
  background: var(--color-main); color: #fff; border: 1px solid var(--color-main);
  box-shadow: 0 10px 22px rgba(200,154,6,.25);
}
.btn_close:hover, .btn_submit:hover { filter: brightness(.97); }
.btn_close:active, .btn_submit:active { transform: translateY(1px); }

/* 포커스/접근성 */
.register a:focus,
.register button:focus,
.register input:focus,
.register textarea:focus {
  outline: 2px solid rgba(4,157,217,.35);
  outline-offset: 2px; border-radius: 10px;
}



.birth-inline{ display:flex; gap:8px; }
.birth-inline .frm_input{ width:100%; }


/* ===== 주소 블록 레이아웃 정리 ===== */
/* 주소 li를 그리드로 전환 */
.register .register_form_inner ul > li:has(#reg_mb_zip) {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 데스크톱: 2열 */
  gap: 10px 12px;                   /* 행/열 간격 */
  align-items: center;
}

/* 불필요한 줄바꿈 제거 */
.register .register_form_inner ul > li:has(#reg_mb_zip) br { display: none; }

/* 첫 번째 라벨(주소 제목) 하단 여백 */
.register .register_form_inner ul > li:has(#reg_mb_zip) label:first-of-type {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  font-weight: 700;
}

/* "우편번호" 라벨은 화면용 라벨이 아니라서 시각적으로는 감춤(접근성 그대로) */
.register .register_form_inner ul > li:has(#reg_mb_zip) label[for="reg_mb_zip"].sound_only {
  position: absolute;
  left: -9999px;
}

/* 우편번호 입력 + 주소검색 버튼을 같은 줄에 */
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_zip {
  grid-column: 1 / span 1;
}
.register .register_form_inner ul > li:has(#reg_mb_zip) .btn_frmline {
  grid-column: 2 / span 1;
  justify-self: start;
  height: 46px;                      /* 인풋 높이와 맞춤 */
  border-radius: 10px;
}

/* 기본주소는 전체 폭 */
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr1 {
  grid-column: 1 / -1;
}

/* 상세주소 / 참고항목 50:50 */
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr2 {
  grid-column: 1 / span 1;
}
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr3 {
  grid-column: 2 / span 1;
}

/* 입력창 여백/높이 통일(이미 공통 frm_input이 있으면 생략 가능) */
#reg_mb_zip,
#reg_mb_addr1,
#reg_mb_addr2,
#reg_mb_addr3 {
  height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
}

/* 모바일: 1열로 자동 전환 */
@media (max-width: 720px) {
  .register .register_form_inner ul > li:has(#reg_mb_zip) {
    grid-template-columns: 1fr;
  }
  .register .register_form_inner ul > li:has(#reg_mb_zip) .btn_frmline,
  .register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr2,
  .register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr3 {
    grid-column: 1 / -1;
  }
}


/* 클릭 가능한 주소 검색 인풋 시각화 */
.addr-search-trigger{
  cursor: pointer;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239aa4af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px; /* 아이콘 공간 */
}
.addr-search-trigger:focus{
  outline: 2px solid rgba(4,157,217,.35);
  outline-offset: 2px;
  border-radius: 10px;
}

/* 주소 블록 2열 레이아웃(상세주소/참고항목 50:50) — 이전에 준 그리드와 조합 */
.register .register_form_inner ul > li:has(#reg_mb_zip){
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: center;
}
.register .register_form_inner ul > li:has(#reg_mb_zip) br{ display:none; }
.register .register_form_inner ul > li:has(#reg_mb_zip) label:first-of-type{
  grid-column: 1 / -1; margin-bottom: 4px; font-weight: 700;
}
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_zip{ grid-column: 1 / span 1; }
.register .register_form_inner ul > li:has(#reg_mb_zip) .btn_frmline{
  grid-column: 2 / span 1; justify-self: start; height: 46px; border-radius: 10px;
}
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr1{ grid-column: 1 / -1; }
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr2{ grid-column: 1 / span 1; }
.register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr3{ grid-column: 2 / span 1; }

@media (max-width: 720px){
  .register .register_form_inner ul > li:has(#reg_mb_zip){ grid-template-columns: 1fr; }
  .register .register_form_inner ul > li:has(#reg_mb_zip) .btn_frmline,
  .register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr2,
  .register .register_form_inner ul > li:has(#reg_mb_zip) #reg_mb_addr3{ grid-column: 1 / -1; }
}


	.input_wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 10px !important;
	}
	.input_wrap input{
		flex-grow: 1;
	}
	.input_wrap button{
		flex-shrink: 0;
    border-radius: 10px;
	}
	.success{
		color: #008000;
	}
	.error{
		color: #ff0000;
	}

  /* 탭 버튼 */
.myinfo-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.myinfo-tabs .tab-btn{
  padding:10px 14px; border-radius:999px; border:1px solid #e3e8ef; background:#fff;
  font-weight:800; cursor:pointer;
}
.myinfo-tabs .tab-btn.active{
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(200,154,6,.18);
}

/* 나의 정보 카드 */
.myinfo-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding:18px 20px; margin-bottom:16px; box-shadow:0 8px 26px rgba(0,0,0,.05);
}
.myinfo-header{ display:flex; align-items:center; gap:14px; margin-bottom:40px; flex-direction: column;}
.avatar{
  width:150px; height:150px; border-radius:50%; overflow:hidden; background:#f2f4f7;
  display:flex; align-items:center; justify-content:center; border:1px solid #e5e9f0;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-initials{ font-weight:900; color:#555; }
.header-text .display-name{ font-size:1.15rem; }
.header-text .badge{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:#fff7da; border:1px solid #f1e1a4; font-weight:700; font-size:.9rem;
}
.header-text .muted{ color:#6b7280; font-size:.9rem; margin-top:2px; }

.myinfo-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px 14px; margin-top:10px;font-size: 1em; text-align: center;
}
.info-row{ display:contents; }
.info-label{ color:#616a78; font-weight:700; }
.info-value{ color:#222; white-space:pre-wrap; }
@media (max-width:720px){
  .myinfo-grid{ grid-template-columns: 1fr; }
  .info-row{ display:block; }
  .info-label{ margin-top:8px; }
}

/* 상태 메시지 색상(중복확인/비번일치 등) */
#msg_mb_id.success, #msg_mb_nick.success, #msg_mb_email.success, #msg_mb_password_re.success{ color:#1b8f3a; }
#msg_mb_id.error,   #msg_mb_nick.error,   #msg_mb_email.error,   #msg_mb_password_re.error{ color:#c0392b; }


/* =========================
   Register Result — Modern Card
   ========================= */

/* 팔레트/라운드 기본값(사이트 전역 변수 있으면 그걸 우선 사용) */
:root{
  --success: #16a34a;           /* 성공 포인트 */
  --muted:   #6b7280;           /* 보조 텍스트 */
  --ring:    rgba(200,154,6,.22); /* var(--color-main) 주변 하이라이트 */
  --rr-main: var(--color-main, #3a8afd);
  --rr-text: #111827;
  --rr-muted: #6b7280;
  --rr-surface: #ffffff;
  --rr-ring: rgba(58,138,253,.2);
  --rr-radius: 16px;
}

/* 컨테이너 카드 */
#reg_result.register{
  max-width: 720px;
  padding: 36px 28px;
  color: var(--rr-text);
  background: var(--rr-surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--rr-radius);
  box-shadow: 0 14px 40px rgba(17,24,39,.08);
  position: relative;
  overflow: hidden;
}

/* 상단 축하 메시지 */
#reg_result .reg_result_p{
  text-align:center;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--rr-muted);
  margin: 0 0 12px;
  display: flex;
      justify-content: center;
    align-items: center;
    gap: 5px;
}
#reg_result .reg_result_p i{
  display:inline-grid; place-items:center;
  width:72px; height:72px; margin-bottom: 12px;
  border-radius: 20px;
  font-size: 28px; color: var(--rr-main);
  border: 1px solid rgba(58,138,253,.24);
  box-shadow: 0 8px 22px rgba(58,138,253,.16), inset 0 0 0 1px rgba(255,255,255,.5);
}
#reg_result .reg_result_p strong{
  display:block;
  margin-top: 2px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--rr-text);
}

/* 설명 문단 */
#reg_result p{
  line-height: 1.75;
  color: #374151;
  margin: 10px 0;
}
#reg_result .result_txt{ margin-top: 6px; }

/* 이메일/아이디 정보 블록 → 카드 느낌 */
#reg_result #result_email{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 14px;
  align-items: center;
  margin: 18px 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
#reg_result #result_email span{
  font-weight: 700;
  color: #4b5563;
}
#reg_result #result_email strong{
  font-family: var(--font-main, inherit);
  font-weight: 800;
  color: var(--rr-main);
  font-size: 1.05rem;
  word-break: break-all;
}

/* 메인으로 버튼(하단 공통 버튼과 톤 맞춤) */
.btn_confirm_reg{
  text-align: center;
  margin: 22px 0 40px;
}
.reg_btn_submit{
  display:inline-block;
  min-width: 260px;
  height: 52px; line-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--rr-main);
  color:#fff;
  border: 1px solid var(--rr-main);
  font-weight: 800;
  font-size: 1.05rem;
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease;
}
.reg_btn_submit:hover{ filter: brightness(.98); }
.reg_btn_submit:active{ transform: translateY(1px); }

/* 작은 화면 최적화 */
@media (max-width: 640px){
  #reg_result.register{ padding: 26px 18px; margin-top: 40px; }
  #reg_result #result_email{ grid-template-columns: 1fr; gap: 6px; }
}

/* 기존 색과의 조화: 네이비 톤 링크/강조 */
#reg_result h2{ margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; }
#reg_result h2 strong{ color: var(--rr-main); }

/* 결과 박스/버튼 좌우 여백(모바일용 gutter) */
@media (max-width: 640px){
  #reg_result { 
    margin-inline: 16px;   /* ← 바깥 여백 추가 */
    border-radius: 12px;   /* 모서리 살짝 둥글게(선택) */
  }
  .btn_confirm_reg{
    margin-inline: 16px;   /* 버튼 컨테이너도 같은 gutter 적용 */
  }
}

/* 이름 강조 (하이라이트 밑줄) */
#reg_result .reg_result_p strong {
  position: relative;
  display: inline-block;
  font-weight: 800;
  color: #111;
  background: linear-gradient(
    transparent 70%,
    color-mix(in oklab, var(--color-main, #c89a06) 30%, transparent) 0
  );
  border-radius: 4px;
}


.password-wrap {
  position: relative;
}

.password-wrap input {
  width: 100%;
  padding-right: 42px; /* 아이콘 공간 */
}

.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;          /* 🔥 핵심 */
  height: 36px;         /* 🔥 핵심 */
  display: flex;        /* 🔥 핵심 */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.pw-toggle:hover {
  color: #333;
}
.pw-toggle i {
  font-size: 16px;      /* 🔥 아이콘 크기 지정 */
  color: #888;
}

/* 회원가입 하단 버튼 영역 */
.btn_confirm {
  display: flex;
  width: 100%;
  gap: 10px;          /* 버튼 사이 여백 */
  margin-top: 40px;
  clear: both;        /* 캡차, float 영향 차단 */
}

/* 버튼 공통 */
.btn_confirm > a,
.btn_confirm > button {
  flex: 1 1 0;        /* ⭐ 핵심: 동일 비율 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 16px;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
}

/* 취소 버튼 */
.btn_confirm .btn_close {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* 제출 버튼 */
.btn_confirm .btn_submit {
  background: var(--color-main, #f4b400); /* 기존 메인컬러 유지 */
  color: #fff;
  border: none;
  position: static !important; /* 혹시 남아있는 fixed 제거 */
}


/* 회원가입 폼 내 버튼/링크 폰트 강제 */
#register_form .btn_confirm > a,
#register_form .btn_confirm > button,
#register_form .btn_frmline,
#register_form button,
#register_form input[type="button"],
#register_form input[type="submit"],
#register_form a.btn_close {
  font-family: var(--font-main) !important;
}


/* =========================
   E-mail (아이디 + 도메인) 레이아웃
   ========================= */
.email_wrap{
  display: grid;
  grid-template-columns: 1.2fr auto 1.2fr 1fr auto; /* 아이디 / @ / 도메인 / 셀렉트 / 버튼 */
  gap: 10px;
  align-items: center;
  width: 100%;
}

.email_wrap .frm_input{
  width: 100%;
  min-width: 0;               /* grid에서 넘침 방지 */
  box-sizing: border-box;
}

.email_wrap .email_at{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-weight: 700;
  opacity: .85;
  line-height: 1;
}

/* 버튼 높이/정렬 (사이트 버튼 톤에 맞게) */
.email_wrap #btn_email_check{
  white-space: nowrap;
  height: 48px;               /* 다른 입력 높이에 맞춰 */
  padding: 0 14px;
  border-radius: 8px;
}

/* select도 입력과 높이 맞추기 (테마마다 다르면 이게 안정적) */
.email_wrap select.frm_input{
  height: 48px;
}

/* 입력도 높이 맞추기 (기존 frm_input이 이미 지정돼 있으면 생략 가능) */
.email_wrap input.frm_input{
  height: 48px;
}

/* =========================
   반응형(모바일): 보기 좋게 줄 바꿈
   ========================= */
@media (max-width: 640px){
  .email_wrap{
    grid-template-columns: 1fr auto 1fr; /* 아이디 / @ / 도메인 */
    grid-template-areas:
      "id at domain"
      "select select select"
      "btn btn btn";
  }

  #email_id{ grid-area: id; }
  .email_at{ grid-area: at; }
  #email_domain{ grid-area: domain; }
  #email_domain_select{ grid-area: select; }
  #btn_email_check{ grid-area: btn; width: 100%; }
}