@charset "utf-8";

.wrap-all{position: relative;min-width: 1440px;min-height: 1080px;}
.wrap-container{padding-bottom: 1147px;min-height: 100%;}
.wrap-container.fixed{padding-top: 120px;}
.area-container{min-height: 100%;}
.inner{/*width: 76%; max-width:1920px; min-width: 1140px;*/ width: 1446px; margin: 0 auto;}
.wrap-mypage{position: relative;z-index:100;width: 100%;min-height: 1380px;padding-bottom: 160px;background-color:#fff;text-align:center;}
.mypage-content{display:inline-block;position:relative;z-index:1;width:1366px;padding-top:60px;padding-left: 377px;text-align:left;}
.wrap-list{position: relative;min-height: 835px;z-index: 10;background-color: #fff;}
.noscroll{overflow: hidden;}



.fl-l{float: left;}
.fl-r{float: right;}
.ta-l{text-align: left;}
.ta-r{text-align: right;}
.ta-c{text-align: center;}

.h3-common{margin: 20px 0 10px;font-size: 24px;color: #fff;font-weight: 800;background-color: #282828;}
.h4-common{padding: 10px 0;font-size: 20px;color: #007236;font-weight: 800;}

/* table */
table{width: 100%;}
.table-initial th, .table-initial td{padding: 5px;border: 1px solid #282828;}

/* .table-hoz-type1 */
.table-hoz-type1{margin-bottom: 50px;border-left: 1px solid #282828;border-right: 1px solid #282828;}
.table-hoz-type1 th{padding: 14px 15px;font-family: 'Pretendard';font-size: 16px;color: #fff;font-weight: 700;text-align: center;background-color: #282828;}
.table-hoz-type1 td{padding: 30px 15px;border-bottom: 1px solid #e8e8e8;font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 500;line-height: 1.5;text-align: center;background-color: #fff;}
.table-hoz-type1 tr:last-child td{border-bottom: 1px solid #282828;}
.table-hoz-type1 td .grade{padding-top:40px; font-size:16px;}
.grade{min-width: 38px;padding-top: 48px;font-weight: 700;}
.point-saving{font-weight: 700;color: #d8231e;}
.type-br{background: url("/images/img/img-br.png")no-repeat center top;}
.type-si{background: url("/images/img/img-si.png")no-repeat center top;}
.type-go{background: url("/images/img/img-go.png")no-repeat center top;}
.type-vi{background: url("/images/img/img-vi.png")no-repeat center top;}
.type-vv{background: url("/images/img/img-vv.png")no-repeat center top;}

/* .area-tab */
.area-tab .tab-content [class*=tab-inner]{display:none;}
.area-tab .tab-content [class*=tab-inner].on{display:block;}

.basic .tab-links{overflow:hidden; margin-bottom: 47px;}
.basic .tab-link{float: left;line-height: 54px;font-size: 18px;color: #767676;font-weight: bold;border-top: 1px solid #282828;border-bottom: 1px solid #282828;border-left: 1px solid #e2e2e2;background-color: #fff;}
.basic .tab-link:first-child{border-left-color: #282828;}
.basic .tab-link:last-child{border-right: 1px solid #282828;}
.basic .tab-link.current{color: #fff;background-color: #282828;}
.num2{width: 50%;}
.num3{width: 33.333333%;}
.num4{width: 25%;}
.num5{width: 20%;}

.area-tab .tab-type1 .tab-links{overflow: hidden;margin-top: -38px;margin-bottom: 64px;text-align: right;}
.area-tab .tab-type1 .tab-links .btn-link{padding-left: 20px;font-family: 'Pretendard';color: #767676;font-weight: 500;line-height: 1;}
.area-tab .tab-type1 .tab-links .btn-link.current{font-weight: 700;color: #282828;}
.area-tab .tab-type1 .tab-links .split:before{content: '';display: inline-block;width: 1px;height: 4px;margin-right: 3px;background-color: #767676;vertical-align: middle;}

.area-tab .tab-type2 .tab-links{margin-bottom: 49px;}
.area-tab .tab-type2 .tab-links:after{content: '';display: block;clear: both;}
.area-tab .tab-type2 .tab-links .btn-link{float: left;height: 71px;padding: 23px 0;border-left: 1px solid #f1f1f1;border-right: 1px solid #f1f1f1;border-top: 1px solid #f1f1f1;border-bottom: 1px solid #575757;font-size: 18px;color: #8a8a8a;font-weight: 400;text-align: center;background-color: #f1f1f1;}
.area-tab .tab-type2 .tab-links .btn-link.current{color: #282828;font-weight: 800;border-left: 1px solid #575757;border-right: 1px solid #575757;border-top: 1px solid #575757;border-bottom: 1px solid #fff;background-color: #fff;}

/* .area-sorting */
.area-sorting .ty1 .links{margin-top: -38px;margin-bottom: 64px;text-align: right;}
.area-sorting .ty1 .links>a{position: relative;margin-left: 16px;padding-bottom: 16px;color: #767676;font-weight: 700;line-height: 1;}
/*.area-sorting .ty1 .links>a.active:after{content: '';display: inline-block;position: absolute;left: 50%;margin-left: -5px;bottom: 0;width: 0;height: 0;border-top: 5px solid #282828;border-bottom: 5px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;}*/
.area-sorting .ty1 .links>a.active{font-weight: 800;color: #000;text-decoration: underline;}


/* 글자 */
.w100p{width: 100%;box-sizing: border-box;}
.area-left{overflow: hidden;display: block;text-align: left;}
.area-center{overflow: hidden;display: block;text-align: center;}
.area-right{overflow: hidden;display: block;text-align: right;}

.h-type1{display: inline-block;margin-right: 10px;padding-bottom: 40px;font-size: 28px;color: #282828;font-weight: 800;letter-spacing: 0;line-height: 1;}
.h-type2{display: inline-block;padding-bottom: 30px;font-size: 24px;color: #282828;font-weight: 800;letter-spacing: 0;line-height: 1;}
.h-type2 + .fl-r button{margin-left: 15px;}
.h-type2-1{padding-bottom: 10px;font-size: 24px;color: #282828;font-weight: 800;letter-spacing: 0;line-height: 1;}
.h-type3{margin-bottom: 15px;font-size: 20px;color: #282828;font-weight: 800;letter-spacing: 0;line-height: 1;}
.h-type4{overflow: hidden;text-align: left;border-bottom: 1px solid #000;}
.h-type4 .h-type{display: inline-block;margin-bottom: 21px;font-size: 18px;color: #282828;font-weight: 400;}
.h-type4 .h-type > strong{font-weight: 800;}
.h-type4 .h-type + .nt-type-gr-r{float: right;}
.h-type5{font-size: 32px;color: #191919;font-weight: 800;}
.h-type6{display: inline-block;margin-right: 23px;font-family: 'Pretendard';font-size: 36px;color: #282828;font-weight: 800;letter-spacing: 0;line-height: 1;vertical-align: top;}
.h-type7{display: inline-block;margin-bottom: 20px;font-family: 'Pretendard';font-size: 16px;color: #282828;font-weight: 800;}
.h-type8{display: inline-block;font-family: 'Pretendard';font-size: 16px;color: #282828;font-weight: 600; position: absolute; top: 18px;}


/* 글자 Type */
.t-type1-total{display: inline-block;margin-left: 10px;font-size: 20px;color: #282828;font-weight: 800;letter-spacing: 0;line-height:29px;}
.t-type1-inform{float: right;display: inline-block;font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 500;line-height: 1.5;}
.t-type1-inform > span{margin-right: 15px;vertical-align: middle;}
.t-type1-inform .btn{vertical-align: middle;}
.t-type2-inform{float: right;display: inline-block;font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 500;line-height: 29px;}
.t-type2-inform > a{margin-left: 5px;vertical-align: top;}
.t-type3-inform{display: inline-block;font-family: 'Pretendard';font-size: 18px;color: #282828;font-weight: 500;line-height: 2;}
.t-type4-inform{overflow: hidden;padding-bottom: 25px;text-align:left}
.t-type4-inform > .nt-type-gr-r{line-height: 1.5;font-size:14px}
.t-type4-inform > .nt-type-gr-r:before{content: '';display: inline-block;width: 4px;height: 4px;border-radius: 50%;margin-right: 8px;vertical-align: middle;background-color: #767676;}
.t-type4-inform > a, .t-type4-inform > button{float: right;margin-top:-4px}

.t-type4-inform > .nt-type-bl-r{position: relative;left: 12px;line-height: 1.5;}
.t-type4-inform > .nt-type-bl-r:before{content: '';display: inline-block;position: absolute;left: -12px;top: 10px;width: 4px;height: 4px;border-radius: 50%;margin-right: 8px;vertical-align: middle;background-color: #282828;}
.t-type5-inform{margin-bottom: 26px;}
.t-type5-inform .inf-h{margin-bottom: 12px;font-size: 20px;color: #282828;font-weight: 700;}
.t-type5-inform .nt-type-bl-r{position: relative;padding-left: 15px;font-size: 14px;word-break: keep-all;line-height: 25px;}
.t-type5-inform .nt-type-bl-r:before{content: '';position: absolute;left: 0;top: 10px;display: inline-block;margin-right: 8px;width: 4px;height: 4px;border-radius: 50%;vertical-align: middle;background-color: #282828;}
.t-type6-inform{margin-bottom: 31px;font-size: 20px;color: #000;font-weight: 400;}
.t-type6-inform:before{content: '';display: inline-block;margin-right: 8px;width: 5px;height: 5px;border-radius: 50%;vertical-align: middle;background-color: #000;}

.t-type2-more{float: right;padding-right: 20px;font-family: 'Pretendard';font-size: 24px;color: #282828;font-weight: 400;vertical-align: middle;background: url("/images/btn/btn-more2.png")no-repeat center right;}

.nt-type-bl-r{font-family: 'Pretendard';color: #282828;font-weight: 500;}
.nt-type-bl-b{font-family: 'Pretendard';color: #282828;font-weight: 700;}
.nt-type-bl-eb{font-family: 'Pretendard';color: #282828;font-weight: 800;}
.nt-type-bl-dl16x{font-family: 'Pretendard';font-size: 16px;color: #282828;font-weight: 400;}
.nt-type-bl-dl18x{font-family: 'Pretendard';font-size: 18px;color: #282828;font-weight: 400;}
.nt-type-bl-b18x{font-family: 'Pretendard';font-size: 18px;color: #282828;font-weight: 700;}
.nt-type-bl-b14x{font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 700;}
.nt-type-bl-r14px{font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 500;}
.nt-type-bl-r14x{font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 500;}
.nt-type-bl-r14x:after{content: '';display: inline-block;width: 0;height: 0;margin-left: 7px;border-top: 4px solid transparent;border-bottom: 4px solid transparent;border-left: 4px solid #282828;border-right: 4px solid transparent;}
.nt-type-bl-r20x{font-family: 'Pretendard';font-size: 20px;color: #282828;font-weight: 800;}
.nt-type-bl-l14x{font-family: 'Pretendard';font-size: 14px;color: #282828;font-weight: 300;}
.nt-type-gr-r{font-family: 'Pretendard';color: #767676;font-weight: 500;}
.nt-type-gr-r14x{font-family: 'Pretendard';font-size: 14px;color: #767676;font-weight: 500;}
.nt-type-re-r{font-family: 'Pretendard';color: #d8231e;font-weight: 500;}
.nt-type-re-b{font-family: 'Pretendard';color: #d8231e;font-weight: 700;}
.nt-type-lg-r14px{font-family: 'Pretendard';font-size: 14px;color: #a2a2a2;font-weight: 500;}

.ns-type-bl-r{font-size: 16px;color: #282828;font-weight: 500;}
.ns-type-bl-r14x{color: #282828;font-size: 14px;font-weight: 500;}
.ns-type-bl-b{color: #282828;font-weight: 700;}
.ns-type-bl-b20x{color: #282828;font-size: 20px;font-weight: 700;}
.ns-type-bl-b24x{color: #282828;font-size: 24px;font-weight: 700;}
.ns-type-bl-eb{color: #282828;font-weight: 800;}
.ns-type-bl-eb20x{color: #282828;font-size: 20px;font-weight: 800;}
.ns-type-bl-eb13x{color: #282828;font-size: 13px;font-weight: 800;}
.ns-type-bl-eb14x{color: #282828;font-size: 14px;font-weight: 800;}
.ns-type-bl-eb18x{color: #282828;font-size: 18px;font-weight: 800;}
.ns-type-bl-r18x{color: #282828;font-size: 18px;font-weight: 500;}
.ns-type-bl-e18x{color: #282828;font-size: 18px;font-weight: 700;}
.ns-type-bl-eb24x{color: #282828;font-size: 24px;font-weight: 800;}
.ns-type-gr-r{color: #767676;font-weight: 400;}
.ns-type-gr-b{color: #767676;font-weight: 700;}
.ns-type-gr-b1{position: relative;display: inline-block;color: #767676;font-weight: 700;}
.ns-type-gr-b1:before{content: '';position: absolute;top: 50%;left: 0;width: 100%;height: 1px;background-color: #767676;}
.ns-type-gr-r14x{font-size: 14px;color: #767676;font-weight: 400;}
.ns-type-re-b{color: #d8231e;font-weight: 700;}

.nm-type-re-b18x{font-family: 'Pretendard';font-size: 18px;color: #ff6461;font-weight: 700;}
.nm-type-re-b24x{font-family: 'Pretendard';font-size: 24px;color: #ff6461;font-weight: 700;}
.nm-type-gr-b18x{font-family: 'Pretendard';font-size: 18px;color: #767676;font-weight: 700;}
.nm-type-re-b18x .num, .nm-type-gr-b18x .num{font-size: 32px;}

/* Color, Weight decoration*/
.fc-type1{color: #d8231e;}
.fw-reg{font-weight: 400;}
.fw-bold{font-weight: 800;}
.underline{border-bottom: 1px solid;}
.bgc-type1{background-color: #fbfbfb;}
.bgc-type2{background-color: #f2f2f2;}

/* 버튼 */
.area-btn-l{overflow: hidden;text-align: left;margin-left: -5px;}
.area-btn-l button, .area-btn-l a{margin-left: 5px;}
.area-btn-c{overflow: hidden;text-align: center;margin-left: -5px;}
.area-btn-c button, .area-btn-c a{margin-left: 5px;}
.area-btn-r{text-align:right;}
.area-btn-row{overflow: hidden;text-align: center;}
.area-btn-row button.btn, .area-btn-row button.btn-type2, .area-btn-row button.btn-type3{display: block;margin: 5px 0;}

.btn{line-height: 28px;padding: 0 15px;box-sizing: border-box;border-radius: 50px;font-family: 'Pretendard';font-size: 14px;color: #fff;font-weight: 500;text-align: center;letter-spacing: -0.25px;}
.btn-type2{line-height: 64px;padding: 0 20px;border-radius: 50px;font-family: 'Pretendard';font-size: 26px;color: #fff;font-weight: 700;text-align: center;}
.btn-type3{line-height: 46px;padding: 0 20px;box-sizing: border-box;border-radius: 50px;font-family: 'Pretendard';font-size: 18px;color: #fff;font-weight: 600;text-align: center;letter-spacing: -0.25px;}
.btn-type4{line-height: 42px;padding: 0 26px;box-sizing: border-box;border-radius: 50px;font-size: 18px;color: #fff;font-weight: 700;text-align: center;letter-spacing: -0.25px;}
.btn-type5{width: 100%;line-height: 71px;font-size: 24px;color: #fff;font-weight: 800;text-align: center;letter-spacing: -0.25px;}
.btn-type6{width: 100%;line-height: 38px;color: #fff;font-weight: 700;text-align: center;letter-spacing: -0.25px;}

.btn-bd{height: 28px;line-height: 24px;padding: 0 18px;box-sizing: border-box;border-width: 2px;border-style: solid;border-radius: 50px;font-family: 'Pretendard';font-size: 14px;font-weight: 700;text-align: center;letter-spacing: -0.25px;}
.btn-bd-type2{line-height: 42px;padding: 0 18px;box-sizing: border-box;border-width: 2px;border-style: solid;border-radius: 50px;font-family: 'Pretendard';font-size: 18px;font-weight: 700;text-align: center;letter-spacing: -0.25px;}
.btn-bd-type3{line-height: 29px;padding: 0 12px;box-sizing: border-box;border-width: 2px;border-style: solid;border-radius: 50px;font-family: 'Pretendard';font-size: 14px;font-weight: 700;text-align: center;letter-spacing: -0.25px;}
.btn-bd-type4{width: 123px;height: 38px;padding: 9px 13px;border-width: 3px;border-style: solid;border-radius: 50px;font-size: 14px;text-align: center;text-indent: 15px;font-weight: 700;line-height: 1;}

.bc-black{background-color: #282828;}
.bc-red{background-color: #d8231e; }
.bc-red1{background-color: #d8231e; line-height: 18px; padding: 5px;}
.bc-gray{background-color: #b5b5b5;}
.bc-gray2{background-color: #9d9d9d;}
.bc-lig-gray{color: #949494;background-color: #efefef;}
.bc-dark-gray{color: #292929;background-color: #dadada;}

.w-type1{width: 110px;}
.w-type2{width: 240px;}
.w-type3{width: 118px;}
.w-type4{width: 187px;}
.w-type5{width: 99px;}

.bc-bd-gray{color: #b2b2b2;border-color: #b2b2b2;}
.bc-bd-red{color: #d8231e;border-color: #d8231e;}
.bc-bd-black{color: #282828;border-color: #282828;}
.bc-bd-lig-gray{color: #9d9d9d;border-color: #9d9d9d;}

.btn-basket-ty1{width: 42px;height: 42px;text-indent: -999999px;background: url("/images/btn/btn-basket1.png")no-repeat;}
.btn-pick-ty1{width: 29px;height: 29px;text-indent: -999999px;background: url("/images/btn/btn-pick-ty1-off.png")no-repeat}
.btn-pick-ty1.on{width: 29px;height: 29px;text-indent: -999999px;background: url("/images/btn/btn-pick-ty1-on.png")no-repeat;}
.btn-pick-ty2{width: 37px;height: 37px;text-indent: -999999px;background: url("/images/btn/btn-pick-ty2-off.png")no-repeat;}
.btn-pick-ty2.on{width: 37px;height: 37px;text-indent: -999999px;background: url("/images/btn/btn-pick-ty2-on.png")no-repeat;}
.btn-pick-ty3{width: 37px;height: 37px;text-indent: -999999px;background: url("/images/btn/btn-pick-ty3-off.png")no-repeat;}
.btn-pick-ty3.on{width: 37px;height: 37px;text-indent: -999999px;background: url("/images/btn/btn-pick-ty3-on.png")no-repeat;}
.sel-all{border-color: #ff4438;color: #ff4438;background: url("/images/btn/btn-sel-all.png")no-repeat center left 12px;}
.sel-del{border-color: #a5a5a5;color: #a5a5a5;background: url("/images/btn/btn-hide-type1.png")no-repeat center left 12px;}
.enter{background: #d8231e url("/images/btn/btn-enter-ty1.png")no-repeat center right 13px;}
.refresh{background: #a7a7a7 url("/images/btn/btn-reflash-ty2.png")no-repeat center right 13px;}
.btn-more-ty2{width: 277px;line-height: 64px;border: 1px solid #d7d7d7;border-radius: 50px;font-size: 18px;color: #282828;font-weight: 700;text-align: center;background:#fff url("/images/btn/btn-more-ty2.png")no-repeat center right 21px;}
/*.btn-list-ty1{width: 160px;height: 59px;font-size: 18px;color: #282828;font-weight: 700;text-align: center;text-indent: 13px;border:2px solid #282828;background:#fff url("/images/btn/btn-list-ty1.png")no-repeat center left 18px;}*/
.btn-list-ty1 {
    width: 135px;
    height: 59px;
    font-size: 18px;
    color: #282828;
    font-weight: 700;
    text-align: center;
    text-indent: 45px;
    border: 2px solid #282828;
    background: #fff url(/images/btn/btn-list-ty1.png)no-repeat center left 18px;}


/*회원가입 2025*/
/*회원가입 선택*/
.join-choice {margin-top: 12%; padding: 0 20px; width: 100%;}
.join-choice .section-title {font-size:30px; color: #22242D; text-align: left; font-weight: 700; margin-bottom: 5px; line-height: 43px;}
.join-choice .first-sub{font-size: 16px;color: #22242D; text-align: left; font-weight:500; line-height: 22px;}
.join-choice .certification-way{margin-top: 20%; padding-bottom: 34%;}
.certification-way>p {font-size:18px; color:#22242D; text-align: left; font-weight: 500;}
.join-choice .confirm-self {margin-top: 4%;height: auto; width: 100%;}
.join-choice .button { margin-bottom:3%; border-radius: 5px; width:100%; height: auto; padding: 0px 8%; text-align: center;font-size: 14px; font-weight:500; letter-spacing: -0.32px; justify-content: center; align-items:center; vertical-align: middle; display: flex; line-height: 48px;}
.confirm-self .no-icon {color:#22242D; border:1px solid #E1E1E1; }
.join-choice .kakaoBtn  { background: #FEE500; color:#22242D; }
.join-choice .kakaoBtn:before{content: ''; display: inline-block; background-position:center; background-size: contain; margin-right: 0.5rem; width: 16px; height: 16px; background-image: url(/Upload/Shoemarker/sample/join/join_kakao.png);}
.join-choice .naverBtn { background: #03C75A;  color:#ffff; }
.join-choice .naverBtn:before{content: ''; display: inline-block; background-position:center; background-size: contain; margin-right: 0.5rem; width: 16px; height: 16px; background-image: url(/Upload/Shoemarker/sample/join/join_naver.png);}
/* 네비게이션 */
.header-sticky {flex-direction:column;align-items:flex-start; display: flex; justify-content: space-between;background: #fff;}
.header-sticky .join-nav-btn {width:100%;display:flex;align-items:center;justify-content:space-between;}
.header-sticky .title{display:block; margin: 0 auto; font-size: 18px; font-weight: 700; margin-bottom: 20px;}
 /* Sticky Header */
.header-sticky {position: sticky;top: 0;z-index: 1000;;background: #fff;}
.stage-container .title {font-size: 20px;  padding:30px 10px 8px; font-weight: 750;}

 /* 버튼 터치 영역 확장 (모바일 UX 최적) */
.header-sticky .icon-btn {background: none;border: none;/* 터치 영역 확대 */cursor: pointer;width: 44px;height: 44px;display: flex;align-items: center;}
/* Progress Bar */
.join-stage .progress-wrap {max-width:600px;margin:0 auto;}
.join-stage .progress-wrap .progress-bg {width:100%;height:2.4px;background:#eee; overflow:hidden;}
.join-stage .progress-wrap .progress-bar {width:20%;height:2.4px;background:#22242D;}

.join-stage {padding:12px 12px 0 !important; width: 100%; max-width: 640px; height: 752px; margin: 0 auto; display: flex; flex-direction: column; position: relative;}


/* 약관동의 리스트 */
.agree-item {display: flex; justify-content: space-between; align-items:center; padding: 10px 10px; cursor: pointer;}
.agree-item .label{display: flex; gap:10px; align-items: center; font-size: 14px; font-weight: 500; cursor: pointer; color:#AEAEAE;}
/*체크박스 스프라이트*/
.agree-item .checkbox {width: 18px; height: 18px; background-image: url(/Upload/Shoemarker/sample/join/checkBox.jpg);background-repeat: no-repeat; background-size: 100% 40px; /* 전체 높이 */}
.agree-item .checkbox.off {background-position-y: 0; /* 비활성 */;}
.agree-item .checkbox.on {background-position-y: -22px; /* 활성 */;}
.agree-item .arrow {font-size: 18px; color:#ccc;}
.stage-container .desc { margin: 0 auto; padding:0 38px; font-weight: 400; font-size:14px;}
.actionBtn {margin: 55% 10px 9%;}
.actionBtn .next-btn {width: 100%; padding: 16px 0; text-align: center; background-color: #E1E1E1; border-radius: 8px; color: #fff; font-size: 17px; transition:.2s; border: none;}
.actionBtn .next-btn .active { bockground:#22242D; }


/*아이디설정*/
.stage-container .sub-txt {font-size: 14px; font-weight:400; color:#AEAEAE;padding:0 10px; }
.stage-container .sub-txt > strong {color:#22242D;}


/* 기본 리셋 및 변수 설정 */
:root {
    --color-border: #E1E1E1;        /* 기본 테두리 */
    --color-focus: #333;         /* 포커스 시 테두리 (검정) */
    --color-error: #EA413C;      /* 에러 (빨강) */
    --color-success: #00C73C;  /*  초록색 (성공) 추가 */
    --color-disabled: #e0e0e0;   /* 버튼 비활성 배경 */
    --color-active: #333;        /* 버튼 활성 배경 */
}

.signup-form-container {
    width: 100%;
    padding: 0 10px; /* 좌우 여백 */
    box-sizing: border-box;
    margin-top: 20px; /* 상단 타이틀과의 간격 */
}

/* 인풋 래퍼: relative로 내부 요소 배치 기준점 잡기 */
.input-wrapper {
    position: relative;
    width: 100%;
}

/* 인풋 스타일 */
.input-wrapper input {
    width: 100%;
    height: 54px; /* 모바일 터치 영역 고려 */
    padding: 0 40px 0 12px; /* 우측 패딩은 삭제 버튼 공간 확보 */
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.input-wrapper input::placeholder {
    color: #bbb;
}

/* 인풋 포커스 상태 */
.input-wrapper input:focus {
    border-color: var(--color-focus);
}

/* 에러 상태 (클래스로 제어) */
.input-box.error .input-wrapper input {
    border-color: var(--color-error);
    color: var(--color-error); /* 입력 텍스트도 빨간색이 필요하면 주석 해제, 보통은 테두리만 */
}

/* 삭제 버튼 (X) */
.btn-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: none; /* 기본 숨김 */
}

.btn-clear.active {
    display: block; /* 활성화 시 등장 */
}

/* 다음 버튼 */
.next-btn {
    width: 100%;
    height: 54px;
    margin-top: 30px; /* 인풋과의 간격 */
    border: none;
    border-radius: 6px;
    background-color: var(--color-disabled);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: not-allowed;
    transition: background-color 0.2s;
}

/* 버튼 활성화 상태 */
.next-btn:not(:disabled) {
    background-color: var(--color-active);
    cursor: pointer;
}

/* 에러 메시지 */
.msg-error {
    display: none;        /* 기본 숨김 */
    align-items: center;  /* 세로 중앙 정렬 (아이콘-텍스트 높이 맞춤) */
    gap: 4px;            /* 아이콘과 텍스트 사이 간격 */
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-error);
    line-height: 1.4;
}

.msg-error svg circle {
    fill: var(--color-error);
}

.input-box.error .msg-error {
    display: flex; /* 에러 발생 시 flex로 보여야 정렬이 유지됨 */
}

/* 성공 메시지 스타일 (에러 메시지와 구조 동일) */
.msg-success {
    display: none;        /* 기본 숨김 */
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-success); /* 초록색 텍스트 */
    line-height: 1.4;
}

/* ✅ 상태별 제어: .success 클래스가 붙으면 발동 */

/* 1. 인풋 테두리 초록색 */
.input-box.success .input-wrapper input {
    border-color: var(--color-success);
}

/* 2. 성공 메시지 보이기 */
.input-box.success .msg-success {
    display: flex;
}

/* 다음 버튼 */
.btn-next {
    width: 100%;
    height: 54px;
    margin-top: 30px; /* 인풋과의 간격 */
    border: none;
    border-radius: 6px;
    background-color: var(--color-disabled);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: not-allowed;
    transition: background-color 0.2s;
}

/* 버튼 활성화 상태 */
.btn-next:not(:disabled) {
    background-color: var(--color-active);
    cursor: pointer;
}



/*비밀번호*/
.btn-toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* 비밀번호 유효성 리스트 */
.pw-validation-list {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.pw-validation-list li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #bbb; /* 기본 회색 */
    transition: color 0.2s;
}

.pw-validation-list li svg {
    color: #bbb; /* 아이콘 기본 회색 */
    transition: color 0.2s;
}

/* ✅ 조건 충족 시 활성화 스타일 */
.pw-validation-list li.active {
    color: #000; /* 글자 검정 */
    font-weight: 600;
}
.pw-validation-list li.active svg {
    color: #000; /* 아이콘 검정 */
}

/* 간격 조정 */
.pw-box { margin-bottom: 10px; }
.confirm-box { margin-top: 20px; }

/* 읽기 전용 인풋 스타일 */
.readonly-box input {
    background-color: #fff;
    color: #bbb;
    border-color: #eee !important;
    cursor: default;
}

.input-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.msg-info {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    margin-bottom: 22px;
    font-size: 13px;
    color: #bbb;
}

/* 추천인 성공/기본 정보 메시지 */
.msg-success-info, .msg-default-info {
    display: none;
    font-size: 13px;
    margin-top: 10px;
    color: #333;
}

.msg-default-info { display: block; color: #888; } /* 기본 상태 */

/* 성공/에러 상태 제어 */
.recommend-box.error .msg-error { display: block; }
.recommend-box.error .msg-default-info { display: none; }

.recommend-box.success .icon-success-check { display: flex; }
.recommend-box.success .msg-success-info { display: block; }
.recommend-box.success .msg-default-info { display: none; }

.icon-success-check {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}



/* 가입완료 버튼 (다음 버튼과 동일한 속성) */
.btn-finish {
    width: 100%;
    height: 52px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 40px;
    cursor: pointer;
}

.actionBtn{margin-top: auto; margin-bottom: 4%;}

.actionBtn .goShop { width: 100%;
    height: 52px;
    background-color: #EA413C;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 40px;
    cursor: pointer;
    padding: 16px 0;}