@charset "utf-8";

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-tab {text-align:center; border-bottom:4px solid var(--primary-color); margin-bottom:var(--space-50);}
.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(--primary-color);}
.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(--primary-color); font-weight:700;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.login-content .links {display:flex; justify-content:space-between; margin-top:14px; font-size:14px; color:#505050; font-weight:500; line-height:1.5em;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}
.login-content .btn-pack {display:block; width:100%; margin-top:8px; border-radius: 8px; font-size: var(--font-size-18);}
.login-content .btn-pack.dark {margin-top:var(--space-30);}
.login-content .btn-pack.xlarge {font-weight:500;}
.login-help {margin-top: var(--space-40); text-align: center; font-size: var(--font-size-15); font-weight: 500;}
.login-help p {margin-bottom: 10px; color: #A8A8A8; font-size: var(--font-size-16); line-height: 1.75em; font-weight: 600;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#333; font-size:var(--font-size-15); font-weight:400; line-height:1.3em; margin-bottom:35px;}
.sns-login .tit:before {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#ddd;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 30px; background:#fff;}
.sns-login a {margin:0 12px;}

/* 약관동의 */
.agree-form {max-width:980px; margin:0 auto;}
.agree-wrap {display:flex; flex-direction:column; gap:40px;}
.agree-all .checkbox label {font-size:20px; font-weight:600; color:var(--dark-color); line-height:1.3em; letter-spacing:-.03em;}
.agree-list {display:flex; flex-direction:column; gap:40px;}
.agree-item {display:flex; flex-direction:column; gap:var(--space-20);}
.agree-tit .checkbox label {font-size:20px; font-weight:600; color:var(--dark-color); line-height:1.3em; letter-spacing:-.03em;}
.agree-wrap .checkbox label {display:inline-flex; align-items:center; gap:10px;}
.agree-wrap .checkbox label:before {width:24px; height:24px; margin-top:0; border:0; border-radius:50%; background: #fff url("../images/member/checkbox.png") 50% 50% no-repeat; border: 2px solid #ccc;}
.agree-wrap .checkbox input:checked + label:before {background-color:var(--primary-color); border-color:var(--primary-color); background-image: url("/images/member/checkbox_on.png");}
.agree-box {height:230px; padding:20px; border:1px solid #eee; border-radius:16px; background:#fff; overflow:auto; color:#505050; font-size:16px; line-height:1.875em; letter-spacing:-.02em;}
.agree-box .terms-wrap {color:#505050; font-size:16px; line-height:1.875em;}
.agree-box .terms-wrap .sec {margin-bottom:0;}
.agree-box .terms-wrap .sec h3 {color:#505050; font-size:16px; font-weight:400; line-height:normal; margin-bottom:0;}
.agree-box .terms-wrap .sec p,
.agree-box .terms-wrap .sec ol {margin-bottom:0;}
.agree-box .terms-wrap .sec strong {font-weight:400;}
.agree-auth {margin-top:60px;}
.agree-auth-tit {margin-bottom:30px; font-size:26px; font-weight:600; color:var(--dark-color); line-height:1.5385em; letter-spacing:-.02em;}
.agree-auth-body {border-top:2px solid var(--dark-color);}
.agree-auth-row {display:flex; align-items:flex-start; gap:40px; padding:50px 0; border-bottom:1px solid #eee;}
.agree-auth-label {flex:0 0 140px; font-size:18px; font-weight:600; color:var(--dark-color); line-height:1.5556em; letter-spacing:-.02em;}
.agree-auth-label .required {color:var(--secondary-color); font-style:normal;}
.agree-auth-field {flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;}
.agree-auth-phone {display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.agree-auth-phone > .input {flex:1 1 180px; min-width:0; height:60px; padding:0 20px; border:1px solid #eee; border-radius:8px; font-size:16px; color:var(--dark-color);}
.agree-auth-phone > .input::placeholder {color:#a8a8a8;}
.agree-carrier {display:flex; flex-wrap:wrap; gap:6px;}
.agree-carrier .btn-carrier {height:60px; padding:0 20px; border:0; border-radius:8px; background:#f8f8f8; color:#a8a8a8; font-size:16px; font-weight:700; line-height:1.5em; letter-spacing:-.02em; cursor:pointer;}
.agree-carrier .btn-carrier.is-active {color:var(--dark-color);}
.btn-auth-request {height:60px; padding:0 20px; border:0; border-radius:8px; background:#121212; color:#fff; font-size:16px; font-weight:700; line-height:1.5em; letter-spacing:-.02em; white-space:nowrap; cursor:pointer;}
.agree-auth-code {position:relative;}
.agree-auth-code .input {display:block; width:100%; height:60px; padding:0 80px 0 20px; border:1px solid #eee; border-radius:8px; font-size:16px; color:var(--dark-color);}
.agree-auth-code .input::placeholder {color:#a8a8a8;}
.agree-auth-code .auth-timer {position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:14px; font-weight:600; color:var(--secondary-color); line-height:1.4286em; letter-spacing:-.02em;}
.agree-submit {margin-top:60px; text-align:center;}
.btn-agree-next {display:inline-flex; align-items:center; justify-content:center; min-width:200px; padding:16px 40px; border:0; border-radius:500px; background:var(--primary-color); color:#fff; font-size:18px; font-weight:600; line-height:1.6667em; letter-spacing:-.02em; cursor:pointer;}

.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:980px; margin:0 auto;}
.join-form .required {color:var(--primary-color);}
.join-form .join-form-txt {margin:0 0 30px; font-size:26px; font-weight:600; color:var(--dark-color); line-height:1.5385em; letter-spacing:-.02em;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0; border-top:2px solid var(--dark-color); font-size:16px; line-height:1.5em;}
.join-form table + table {border-top:0;}
.join-form table caption {width: auto; height: auto; text-indent: 0; padding:50px 0 44px; font-size:16px; font-weight:600; color:#878787; line-height:1.75em; letter-spacing:-.02em; text-align:left; caption-side:top;}
.join-form table caption.blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.join-form table tbody {display:flex; flex-direction:column; gap:40px; padding:50px 0; border-bottom:1px solid #eee;}
.join-form table + table tbody {padding-top:0;}
.join-form table tr {display:flex; align-items:center; gap:40px;}
.join-form table tr:has(#address) {align-items:flex-start;}
.join-form table th {flex:0 0 140px; padding:0; border:0; background:none; font-size:18px; font-weight:600; color:var(--dark-color); line-height:1.5556em; letter-spacing:-.02em; text-align:left;}
.join-form table tr:has(#address) th {padding-top:18px;}
.join-form table td {display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1; min-width:0; padding:0; border:0; color:#505050;}
.join-form table tr:has(#address) td {flex-direction:column; align-items:stretch; gap:12px;}
.join-form table tr:has(#address) td .mgb5 {display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:0;}
.join-form table tr:has([name="gender"]) td {gap:24px; min-height:60px;}
.join-form table .input {display:block; width:100%; height:60px; padding:0 20px; border:1px solid #eee; border-radius:8px; font-size:16px; color:var(--dark-color);}
.join-form table .input::placeholder {color:#a8a8a8;}
.join-form table td:has(.btn-pack) .input {flex:1 1 180px; min-width:0;}
.join-form table #zip {flex:0 0 209px; width:209px;}
.join-form input[readonly] {background:#fff; color:var(--dark-color);}
.join-form .btn-pack.medium.dark {flex-shrink:0; height:60px; padding:0 20px; border:0; border-radius:8px; background:#121212; color:#fff; font-size:16px; font-weight:700; line-height:60px; letter-spacing:-.02em;}
.join-form .radiobox label {font-size:16px; font-weight:500; color:#505050; line-height:1.5em; letter-spacing:-.03em;}
.join-form .radiobox label:before {width:18px; height:18px; margin-right:8px; background:#fff; border:1px solid #ddd;}
.join-form .radiobox input:checked + label:before {background:#fff; border-color:var(--primary-color); box-shadow:inset 0 0 0 4px var(--primary-color); background-image:none;}
.join-form .help-text {display:block; margin:12px 0 0; font-size:16px; color:#676767; line-height:1.5em; letter-spacing:-.02em;}
.join-form .field-text {flex:1; min-width:0; font-size:16px; font-weight:400; color:#505050; line-height:1.5em; letter-spacing:-.02em;}
.join-form table tr:has(.field-text):not(:has(.input)) td {min-height:60px;}
.join-form .btn-pack.medium.btn-leave {flex-shrink:0; height:auto; padding:8px 12px; border:1px solid #dfdfdf; border-radius:8px; background:#fff; color:#a8a8a8; font-size:14px; font-weight:500; line-height:1.4286em; letter-spacing:-.02em;}
.join-form + .buttons {margin-top:60px; text-align:center;}
.join-form + .buttons .btn-pack.xlarge.focus {min-width:200px; height:auto; padding:16px 40px; border:0; border-radius:500px; background:var(--primary-color); color:#fff; font-size:18px; font-weight:600; line-height:1.6667em; letter-spacing:-.02em;}

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

/* 게정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-tab {text-align:center; border-bottom:4px solid var(--primary-color); margin-bottom:var(--space-50);}
.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(--primary-color);}
.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(--primary-color); font-weight:700;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.find-content .btn-pack {display:block; width:100%; margin-top:10px;}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.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(--primary-color); border-bottom:1px solid #ddd;}
.find-result h4 {font-size:var(--font-size-22); font-weight:700; line-height:1.4em; margin-bottom:20px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--primary-color); font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; line-height:1.7em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {max-width:470px; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; background:#f9f9f9; border:1px solid #e5e5e5; border-radius:10px;}
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {width:90px; color:#222; font-weight:700;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%;}

@media (max-width: 1024px) {
	.agree-all .checkbox label,
	.agree-tit .checkbox label {font-size:18px;}
	.agree-box {height:200px;}
	.agree-auth-row {flex-direction:column; gap:16px; padding:30px 0;}
	.agree-auth-label {flex:none; width:100%;}
	.agree-auth-phone > .input {flex:1 1 100%;}
	.btn-auth-request {width:100%;}
	.join-form table tr {gap:16px;}
	.join-form table tbody {padding:30px 0;}
}

@media (max-width: 768px) {
	.agree-box {height:160px; padding:16px; font-size:var(--font-size-15);}
	.agree-auth-tit {font-size:var(--font-size-22); margin-bottom:20px;}
	.agree-auth-row {padding:24px 0;}
	.agree-carrier .btn-carrier,
	.btn-auth-request,
	.agree-auth-phone > .input,
	.agree-auth-code .input {height:52px; font-size:var(--font-size-15);}
}