@charset "utf-8";

/* 로그인 */
.login-container {background: url(../images/sub/login-bg.jpg) no-repeat  50% 50% / cover ;  min-height: 100vh;}
.login-container #footer {display: none;}
.login-container .real-cont {padding:clamp(100px, calc( 210 / var(--inner) * 100vw ), 210px) 0 ;}
.login-area {max-width:500px; margin:0 auto; padding: var(--padding-65); border-radius:36px; border: 1px solid rgba(255, 255, 255, 0.30);   background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px);}
.login-area .sub-title {margin-bottom: var(--padding-40); color: #fff;}

.login-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.login-tab ul {display:flex; padding:0 2px;}
.login-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.login-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.login-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.login-tab ul li.active a {color:var(--color-primary); font-weight:700;}
.login-content .group {margin-bottom:10px;}
.login-content .group .input {display:block; width:100%; height:clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); font-size:16px; border-radius: 4px; color: #000;}
.login-content .links {display:flex; justify-content:space-between; margin-top:10px; padding: 0 var(--padding-15); font-size:12px; color:#fff; line-height:1.5em;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .linkbx {display: flex; justify-content: center; margin-top:20px; color: #fff; font-size: 12px; font-weight: 400;}
.login-content .linkbx .bar {display:inline-block; vertical-align:middle; margin:.1em 12px 0; width:1px; height:12px; background:#fff;}
.login-content .btn-wrap {margin-top:10px;}
.login-content .btn-pack {display:block; width:100%; margin-top:10px; border-radius: 4px; font-size: var(--font-size-16) !important; height:clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px) !important; line-height: clamp(36px, calc( 42 / var(--inner) * 100vw ), 42px) !important;}
.login-content .btn-pack.focus {background: var(--color-secondary) !important; border-color: var(--color-secondary) !important; }
.login-content .btn-pack.xlarge {font-weight:500;}
.sns-login {text-align:center; margin-top:40px;}
.sns-login .tit {position:relative; color:#fff; font-size:10px; font-weight:400; line-height:1.3em; margin-bottom:40px;}
.sns-login .tit:before,
.sns-login .tit:after {position: absolute; content: ''; top: 50%; transform: translateY(-50%); height: 1px; width: 44%; background: #fff;}
.sns-login .tit:before {left: 0;}
.sns-login .tit:after {right: 0;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 15px;}
.sns-login a {display: inline-block; margin:0 4px !important;}
.sns-login a img {width:clamp(30px, calc( 43 / var(--inner) * 100vw ), 43px) ;}

/* 약관동의 */
.agree-wrap {margin-top:var(--padding-60);}
.agree-wrap .group {margin-top:20px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {padding: var(--padding-12) var(--padding-20); color:#868686; font-size:14px !important; font-weight:400; line-height:1.3em; background: #F2F2F2;}
.agree-wrap .agree-tit .checkbox label:before {margin-top:-.01em; width:16px; height:16px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:1px solid #868686; }
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:var(--color-secondary); border-color:var(--color-secondary); background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:140px; margin-top:0 !important; padding:16px 20px; border:1px solid #ddd; overflow:auto; scrollbar-color: var(--color-secondary) #E6E6E6;}
.agree-wrap .agree-box::-webkit-scrollbar {width: var(--padding-10);}
.agree-wrap .agree-box::-webkit-scrollbar-track {background: #E6E6E6;}
.agree-wrap .agree-box::-webkit-scrollbar-thumb {background: var(--color-secondary); border-radius: 60px;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:10px !important;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:12px !important; font-weight:400; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}
.agree-wrap .agree-box {padding:16px 20px;}

.agree-box2 {padding: 13px var(--padding-20); }
.agree-box2-inner {display: flex; justify-content: space-between; align-items: center; margin-top: var(--padding-20); width: 100%; gap: var(--padding-20); flex-wrap: wrap;}
.agree-box2-opt {display: flex; align-items: center; gap: 8px;}
.agree-box2-opt .checkbox label {color: var(--color-dark); font-size: 14px; }
.agree-box2-opt .checkbox label:before {width: 16px; height: 16px; background: #fff url("../images/member/checkbox.png") 50% 50% no-repeat; border: 1px solid #868686;}
.agree-box2-opt .checkbox input:checked + label:before {background-color: var(--color-secondary); border-color: var(--color-secondary); background-image: url("/images/member/checkbox_on.png");}
.agree-box2-opts {display: flex; align-items: center; gap: var(--padding-20);}
.agree-box2-opts .agree-box2-opt .checkbox label {color: #868686;}


.terms-wrap {font-weight:400; color:#666; line-height:1.75em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:700; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:700;}
.terms-wrap .sec ol li {padding-left:1em; text-indent:-1em;}
.terms-wrap .sec ol li ol li {padding-left:1.35em; text-indent:-1.35em;}
.terms-wrap .policy-contact {display:flex; padding:20px 0; background:#fafafa; border:1px solid #e5e5e5; margin-bottom:1em;}
.terms-wrap .policy-contact dl {flex:1; padding:0 20px; border-left:1px solid #e5e5e5;}
.terms-wrap .policy-contact dl:first-child {border-left:0;}
.terms-wrap .policy-contact dt {font-weight:500; color:#333; margin-bottom:12px;}

/* 회원가입 */
.join-form {max-width:650px; margin:0 auto;}
.join-form .input {color: #000 !important;}
.join-form .required {display: inline-flex; align-items: center; padding-left: 5px; color:var(--color-secondary); vertical-align: middle;}
.join-form-sections {display: flex; flex-direction: column; gap: var(--padding-60);}
.join-field {display: flex; flex-direction: column; gap: 4px;}
.join-label {margin-bottom: 4px; font-size: 14px; font-weight: 400; color: #686868;}
.join-label label {color: #686868;}
.join-input-row {display: flex; align-items: center; gap: var(--padding-10); flex-wrap: wrap;}
.join-input-row-full {width: 100%;}
.join-input-row .join-input {flex: 1; min-width: 0;}
.join-input {width: 100%; height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); padding: var(--padding-14) var(--padding-20); background: #F2F2F2; border: none; font-size: var(--font-size-14); font-weight: 400; color: #000;}
.join-input::placeholder {color: #BEBEBE;}
.join-input[readonly],
.join-input[disabled] {color: #BEBEBE;}
.join-btn-verify {flex-shrink: 0; width: clamp(100px, calc( 150 / var(--inner) * 100vw ), 150px); height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); padding: var(--padding-10); background: var(--color-secondary); color: var(--color-white); font-size: var(--font-size-14); font-weight: 400; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.join-btn-verify.border {background: #fff; border: 1px solid var(--color-secondary); color: var(--color-secondary);}
.join-btn-verify.check {background: #999;}
.join-btn-verify.check svg {width:  clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px); height:  clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px);}
.join-input-col {display: flex; flex-direction: column; gap: var(--padding-10);}
.join-hint {font-size: 12px; font-weight: 400; color: #BEBEBE;}
.join-gender {display: flex; align-items: center; gap: var(--padding-10);}
.join-gender-radio {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);}
.join-gender-btn {display: flex; align-items: center; justify-content: center; width: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); padding: var(--padding-10) 0; background: var(--color-white); border: 1px solid var(--color-secondary); color: var(--color-secondary); font-size: var(--font-size-14); font-weight: 400; cursor: pointer; text-align: center; line-height: 1.2;}
.join-gender-radio:checked + .join-gender-btn {background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white);}
.buttons.mem-buttons {margin-top: 40px;}
.buttons.mem-buttons .btn-pack {width: 100% !important; margin: 0 !important;}
/* 휴대전화 입력: 드롭다운(010) + 가운데숫자 + - + 뒷숫자 */
.join-phone-row {display: flex; align-items: center; gap: var(--padding-10); flex-wrap: wrap;}
.join-phone-inputs {display: flex; align-items: center; flex: 1; min-width: 0; background: #F2F2F2; position: relative;}
.join-phone-prefix {width: clamp(70px, calc( 120 / var(--inner) * 100vw ), 120px); height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); padding: 0 var(--padding-10); background: #F2F2F2; border: 0; font-size: var(--font-size-14); color: #000; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4h9L6 9.5 1.5 4z' fill='%23868686'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center;}
.join-phone-sep {flex-shrink: 0; margin: 0 4px; color: #868686; font-size: var(--font-size-14);    text-indent: -999em; width: 10px;  height: 2px; background: #868686;}
.join-phone-mid {flex: 1; min-width: 0; width: 60px; height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); padding: 0 var(--padding-10); background: #F2F2F2; border: 0; font-size: var(--font-size-14);}
.join-phone-mid::placeholder,
.join-phone-last::placeholder {color: #BEBEBE;}
.join-phone-last {flex: 1; min-width: 0; width: 60px; height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px); padding: 0 var(--padding-10); background: #F2F2F2; border: 0; font-size: var(--font-size-14);}
.join-phone-row .join-btn-verify {flex-shrink: 0;}
.join-phone-inputs .time {position: absolute; right: var(--padding-20); font-size: var(--font-size-14); color: var(--color-secondary); font-weight: 500;}
.join-phone-inputs .timeinput {padding-right: 65px;}
.join-email-inputs {display: flex; align-items: center; flex: 1; min-width: 0; background: #F2F2F2; position: relative;}
.join-email-inputs .time {position: absolute; right: var(--padding-20); font-size: var(--font-size-14); color: var(--color-secondary); font-weight: 500;}
.join-email-inputs .timeinput {padding-right: 65px;}
.postcode-inputs {background:transparent;gap:var(--padding-10);}

.certification-retry {display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; color: var(--color-secondary); width: 100%;}
.certification-retry .btn-retry {border: 0;background: transparent; font-weight: bold; color: var(--color-secondary); white-space: nowrap;}
/* 이메일 인증 완료 메시지 */
.join-email-verify-row {margin-top: var(--padding-10);}
.join-email-verify-row.email-verified .email-verified-msg {display: inline-block; color: var(--color-success); font-weight: 700; font-size: var(--font-size-14); flex-shrink: 0;}
.field-text {display: flex;flex-direction: column;gap: 5px; margin-top: 5px;}
.field-text .field {font-size:12px; color: #BEBEBE;}

.leavebox {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center;}
.leavebox .link-leave {font-size: 14px; font-weight: 500; text-decoration: underline;}

/* 가입완료 */
.join-complete {text-align:center;}
.join-complete .tit {color:var(--color-primary); font-size:28px; font-weight:700; line-height:1.4em; margin-bottom:30px;}
.join-complete .txt {color:#333; font-size:18px; line-height:1.8em;}
.join-complete .icon {width:180px; height:180px; background:var(--color-secondary) url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:36px auto 45px;}
.join-complete .buttons {margin:0;}

/* 게정찾기 */
.find-area {max-width:490px; margin:0 auto;}
.find-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.find-tab ul {display:flex; padding:0 2px;}
.find-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.find-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.find-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.find-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.find-tab ul li.active a {color:var(--color-primary); font-weight:700;}
.find-content .group {margin-bottom:10px;}
.find-content .group .input {display:block; width:100%; height: 46px; font-size:14px; background: #F2F2F2; border: 0;}
.find-content .group .input::placeholder {color: #BEBEBE; font-size: var(--font-size-14);}
.find-content .group .email-link {display: inline-flex;align-items: center; gap: 4px; }
.find-content .group .email-link .txt {color: var(--color-secondary);}
.find-content .group .txt { line-height: 1.5; font-size: 12px; color: #868686;}
.find-content .btn-pack {display:block; width:100%; height: 46px !important; line-height: 44px !important; margin-top:20px; font-size: 14px !important; font-weight: 400 !important;}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.find-email-inputs {display: flex; align-items: center; flex: 1; min-width: 0; background: #F2F2F2; position: relative;}
.find-email-inputs .time {position: absolute; right: var(--padding-170); font-size: var(--font-size-14); color: var(--color-secondary); font-weight: 500;}
.find-email-inputs .timeinput {padding-right: 65px;}
.find-certification-retry {display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; color: var(--color-secondary); width: 100%;}
.find-certification-retry .btn-retry {border: 0; background: transparent; font-weight: bold; color: var(--color-secondary); white-space: nowrap;}
.find-notice {background:#e7f3ff; border:1px solid #2196F3; padding:15px; margin-bottom:20px; border-radius:5px;}
.find-notice .find-notice-tit {margin:0; font-size:14px; color:#0c5460;}
.find-notice .find-notice-desc {margin:8px 0 0 0; font-size:12px; color:#0c5460; line-height:1.5;}
.find-result {text-align:center; padding:34px 42px; color:#505050; font-size:18px; font-weight:400; line-height:1.75em; background:#fafafa; border-top:2px solid var(--color-primary); border-bottom:1px solid #ddd;}
.find-result h4 {font-size:22px; font-weight:700; line-height:1.4em; margin-bottom:20px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--color-primary); font-size:30px; font-weight:700; line-height:1.5em;}
.find-content .input-row {display: flex; gap:var(--padding-10);}
.find-content .btn-verify {flex-shrink: 0; width: clamp(90px, calc( 150 / var(--inner) * 100vw ), 150px);  height: 46px;   padding: var(--padding-10);   background: var(--color-secondary);  color: var(--color-white);   font-size: var(--font-size-14); font-weight: 400;  border: none; cursor: pointer;  display: inline-flex;  align-items: center;  justify-content: center;}
.find-content .btn-verify.border {background: #fff; border: 1px solid var(--color-secondary); color: var(--color-secondary);}
.find-content .btn-verify.check {background: #999;}
.find-content .btn-verify.check svg {width:  clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px); height:  clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px);}

.mt-20 {margin-top: 20px;}
.fine-email-result { text-align: center;}
.fine-email-result .top,
.fine-email-result .mid {margin-bottom: var(--padding-40);}
.fine-email-result .mid {display: flex;flex-direction: column;gap: var(--padding-16);}
.fine-email-result .mid .txt1 {font-weight: bold;}
.fine-email-result .mid .txt2 {padding: var(--padding-15); font-size: var(--font-size-24); font-weight: 600; line-height: 1.4em; border: 1px solid #ddd;}
.fine-email-result .group {margin-top: 20px;}

.find-flx {display: flex;gap: 10px;}
.find-flx .btn-pack {margin-top: 0 !important;}

/* 비밀번호 보기/숨기기 토글 (find_pw_reset 등) */
.pw-toggle-wrap {position: relative; display: block;}
/* .pw-toggle-wrap .input {padding-right: clamp(28px, calc( 46 / var(--inner) * 100vw ), 46px);} */
.pw-toggle-wrap .input {padding-right: clamp(28px, calc( 46 / var(--inner) * 100vw ), 46px); font-family: 'Pretendard', sans-seif;}
.pw-toggle-wrap .input::placeholder {font-family: 'Pretendard', sans-seif; font-size: inherit; letter-spacing: normal;}
.pw-toggle-btn {position: absolute; right: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); top: 0; bottom: 0; width: clamp(14px, calc( 24 / var(--inner) * 100vw ), 24px); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-dark); padding: 0;}
.pw-toggle-btn:focus {outline: none;}
.pw-toggle-icon {display: block; pointer-events: none;}
.pw-toggle-icon[hidden] {display: none;}



/* 마이페이지 */
.myinfo-border {border-top: 1px solid #868686;}
.myinfo-wrap {max-width: 1200px; margin: 0 auto;  height: 60vh;}
.myinfo-wrap .inner {display: flex; flex-direction: column; gap: var(--padding-100); align-items: center;padding-top: var(--padding-100);}
.myinfo-head {display: flex; flex-direction: column; align-items: center; gap: var(--padding-24); width: 100%; text-align: center;}
.myinfo-greeting {line-height: 1.1;}
.myinfo-name {font-size: var(--font-size-44); font-weight: 700;}
.myinfo-suffix {font-size: var(--font-size-30); font-weight: 500;}
.myinfo-email {color: #868686; font-size: var(--font-size-24); }
.myinfo-btn-edit {display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: clamp(160px, calc( 200 / var(--inner) * 100vw ), 200px); height: 36px; padding: 0 var(--padding-20);  border: 1px solid var(--color-dark); border-radius: 8px; text-align: center;}
.myinfo-btn-edit:hover {background:var(--color-dark); color:#fff;}
.myinfo-btn-edit:hover path {fill:#fff;}
.myinfo-btn-icon {flex-shrink: 0; display: block; width: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px);}
.myinfo-btn-txt {display: inline-block;}
.correction-form .agree-box2-inner {margin-top: 0;}
.correction-form .buttons.mem-buttons {margin-top: 20px;}
.btn-edit {display: flex; align-items: center; gap: var(--padding-10);}

/* 회원탈퇴 */
.member-leave {display: flex; flex-direction: column; align-items: center; gap: var(--padding-60);}
.member-leave-notice {display: flex; flex-direction: column; align-items: center; gap: var(--padding-24); width: 100%; text-align: center;}
.member-leave-notice-tit {color: var(--color-secondary); font-size: var(--font-size-18); font-weight: 500;}
.member-leave-notice-desc {opacity: 0.8; color: #686868;  line-height: 1.5;}
.member-leave-divider {width: 100%; max-width: 490px; height: 1px; background: #DDDDDD;}
.member-leave-fields {display: flex; flex-direction: column; width: 100%;} 
.member-leave-rowbx {padding: 0 var(--padding-20);}
.member-leave-row {display: flex; align-items: center; gap: 10px;}
.member-leave-row .member-leave-label {flex: 1; margin-bottom: 10px; color: #686868; font-size: 14px; }
.member-leave-row-value {height: 44px; }
.member-leave-email {font-size: var(--font-size-20);}
.member-leave-row-input {height: 44px; padding: 14px 0;}
.member-leave-input {width: 100%; height: 44px; padding: 10px var(--padding-20); background: #F2F2F2; border: none; font-size: 14px; }
.member-leave-input::placeholder {color: #BEBEBE;}
.member-leave-action {display: flex; flex-direction: column; align-items: center; gap: var(--padding-40); margin-top: var(--padding-40); width: 100%;}
.member-leave-agree {display: flex; align-items: center; gap: 8px;}
.member-leave-agree .checkbox label {color: #868686; font-size: 14px; font-weight: 400;}
.member-leave-agree .checkbox label:before {width: 16px; height: 16px; border: 1px solid #868686;}
.member-leave-agree .checkbox input:checked + label:before {background-color: var(--color-secondary); border-color: var(--color-secondary); background-image: url("/images/member/checkbox_on.png");}
.member-leave-btn {width: 100%; height: 44px; padding: var(--padding-10); background: var(--color-secondary); color: var(--color-white); font-size: var(--font-size-14); font-weight: 700; border: none; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.member-leave-fieldswrap {max-width: 490px; margin: 0 auto; width: 100%;}

.modal {padding: var(--padding-50); max-width: 490px; width: 100%; border-radius: 16px;}
.leave-content {display: flex;flex-direction: column;align-items: center;justify-content: center; gap: var(--padding-60); text-align: center;}
.leave-content .txt1 {margin-bottom: var(--padding-30); font-size:var(--font-size-24); font-weight: 700; line-height: 1.33;}
.leave-content .txt2 {color: #686868; line-height: 1.5;}
.leave-content .btn-pack {display: flex;align-items: center;justify-content: center; height: 44px; width: 100%; background: var(--color-secondary);color: #fff; border: 0;}