@charset "utf-8";

.member-container {background:#fafafa;}

.member-title {display:flex; flex-direction:column; gap:var(--space-15); text-align:center; margin-bottom:var(--space-40);}
.member-title h1 {color:#121212; font-size:var(--font-size-48); font-weight:800; line-height:1.3em;}
.member-title p {color:#505050; font-size:var(--font-size-18); line-height:1.5em;}
.member-title p strong {color:#121212;}

/* 로그인 */
.login-area {max-width:670px; margin:0 auto; padding:var(--space-80) var(--space-60); background:#fff; border-radius:var(--radius-56); box-shadow:0 10px 30px 0 rgba(0,0,0,0.1);}

.login-area .form .group {margin-bottom:var(--space-26);}
.login-area .form .group label {display:block; margin-bottom:var(--space-10); color:#121212; font-size:var(--font-size-20); font-weight:800; line-height:1.3em;}
.login-area .form .group .input-area {position:relative;}
.login-area .form .group .icon {position:absolute; top:50%; left:20px; margin-top:-10px; width:20px; height:20px;}
.login-area .form .group .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.login-area .form .group .input {display:block; width:100%; height:60px; padding-left:64px; font-size:var(--font-size-18); border-radius:var(--radius-8);}
.login-area .form .group .input::placeholder {color:#ccc;}
.login-area .links {display:flex; justify-content:space-between; margin-bottom:var(--space-30); font-size:var(--font-size-16); color:#121212; font-weight:600; line-height:1.5em;}
.login-area .links a:hover {text-decoration:underline;}
.login-area .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}
.login-area .btn-pack {display:block; width:100%; border-radius:8px;}
.login-area .btn-pack.xlarge {font-weight:700;}
.login-area .not-member {margin-top:var(--space-30); text-align:center; display:flex; align-items:center; justify-content:center; gap:var(--space-20);}
.login-area .not-member span {display:inline-block; color:#505050; font-size:var(--font-size-18); line-height:1.5em;}
.login-area .not-member a {display:inline-block; padding:5px 20px; border-radius:4px; background:#f7c743; color:#fff; font-size:var(--font-size-16); font-weight:700; line-height:1.5em;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#333; font-size:15px; 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;}

/* 약관동의 */
.join-box {padding:var(--space-80) var(--space-60); background:#fff; border-radius:var(--radius-56); box-shadow:0 10px 30px 0 rgba(0,0,0,0.1);}

.join-step {display:flex; align-items:center; justify-content:center; gap:var(--space-40); margin-bottom:var(--space-40);}
.join-step .step {display:flex; align-items:center; gap:var(--space-16);}
.join-step .step .number {display:flex; flex-direction: column; align-items:center; justify-content:center; gap:3px; width:100px; height:100px; border-radius:50%; border:1px solid #121212; background:#fff; color:#505050; font-size:var(--font-size-14); font-weight:700; line-height:1.3em;}
.join-step .step .number strong {font-size:var(--font-size-32);; line-height:1em;}
.join-step .step .text {color:#505050; font-size:var(--font-size-18); font-weight:400; line-height:1.3em;}
.join-step .line {display:inline-block; width:60px; height:1px; background:#121212;}
.join-step .step.current .number {color:#fff; background:#121212;}
.join-step .step.current .text {color:#121212; font-weight:700;}

.agree-wrap {margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#121212; font-size:var(--font-size-20); font-weight:700; line-height:1.3em;}
.agree-wrap .agree-tit .checkbox label:before {margin-top:-.02em; width:24px; height:24px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:2px solid #ccc; border-radius:100%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:#96d651; border-color:#96d651; background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; background:#f9f9f9; border:1px solid #ddd; border-radius:var(--radius-8); overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:var(--font-size-16);}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:var(--font-size-16); font-weight:400; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}

.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-title {display:flex; justify-content:space-between; align-items:center; gap:var(--space-20); margin-bottom:var(--space-16);}
.join-form-title h3 {color:#121212; font-size:var(--font-size-24); font-weight:700; line-height:1.3em;}
.join-form-title p {color:#505050; font-size:var(--font-size-16); line-height:1.3em;}
.join-form-title p .required {color:#fd8239; margin-right:4px;}

.join-form.mgb {margin-bottom:var(--space-80);}
.join-form .required {display:inline-block; vertical-align:middle; margin-top:-0.2em; width:6px; height:6px; border-radius:50%; background:#fb8507;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #121212; font-size:var(--font-size-18); line-height:1.5em;}
.join-form table th {height:80px; padding:10px 30px; border:1px solid #ddd; background:#f9f9f9; font-weight:700; color:#121212;}
.join-form table th .required {margin-left:4px;}
.join-form table td {padding:10px 30px; border:1px solid #ddd; color:#121212;}
.join-form tr th:first-child,
.join-form tr td:first-child {border-left:0;}
.join-form tr th:last-child,
.join-form tr td:last-child {border-right:0;}
.join-form .items {display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-20) var(--space-60);}
.join-form .items .radiobox input + label:before {width:20px; height:20px; border-radius:50%; background:#fff;}
.join-form .items .radiobox input:checked + label:before {background:#f7c743 url('/images/bbs/checkbox.png') no-repeat center center; background-size:10px auto; border-color:#f7c743;}
.join-form .input {height:60px; padding:0 20px; border-radius:var(--radius-8); font-size:var(--font-size-16);}
.join-form .input::placeholder {color:#ccc;}
.join-form .btn-pack.medium {display:inline-flex; justify-content:center; align-items:center; font-size:var(--font-size-16); height:60px; line-height:1.2em; border-radius:var(--radius-8); font-size:var(--font-size-18); font-weight:700;}
.join-form .input-flex {display:flex; align-items:center; gap:10px;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form .datepicker-wrap {display:flex;}
.join-form .datepicker-wrap .input {border-radius: var(--radius-8) 0 0 var(--radius-8);}
.join-form .datepicker-wrap .ui-datepicker-trigger {width:60px; height:60px; border:1px solid #ddd; border-radius:0 var(--radius-8) var(--radius-8) 0;}
.join-form .datepicker-wrap .ui-datepicker-trigger:hover {background-color:#f9f9f9;}
.join-form + .buttons {margin-top:50px;}

/* 가입완료 */
.join-complete {text-align:center; margin-bottom:var(--space-60);}
.join-complete .icon {margin-bottom:var(--space-60);}
.join-complete .tit {color:#121212; font-size:var(--font-size-40); font-weight:700; line-height:1.4em; margin-bottom:var(--space-20);}
.join-complete .txt {color:#505050; font-size:var(--font-size-20); line-height:1.8em;}
.join-complete .buttons {margin:0;}

/* 게정찾기 */
.find-area {max-width:670px; margin:0 auto; padding:var(--space-80) var(--space-60); background:#fff; border-radius:var(--radius-56); box-shadow:0 10px 30px 0 rgba(0,0,0,0.1);}
.find-content .group {margin-bottom:var(--space-26);}
.find-content .group label {display:block; margin-bottom:var(--space-10); color:#121212; font-size:var(--font-size-20); font-weight:800; line-height:1.3em;}
.find-content .group .input-area {position:relative;}
.find-content .group .icon {position:absolute; top:50%; left:20px; margin-top:-10px; width:20px; height:20px;}
.find-content .group .input {display:block; width:100%; height:60px; padding-left:64px; font-size:var(--font-size-18); border-radius:var(--radius-8);}
.find-content .group .input::placeholder {color:#ccc;}
.find-content .btn-pack {display:block; width:100%; border-radius:8px; margin-top:var(--space-40);}
.find-content .btn-pack.xlarge {font-weight:700;}
.find-result {text-align:center; padding:var(--space-40) var(--space-40); color:#505050; font-size:18px; font-weight:400; line-height:1.75em; background:#fafafa; border-top:2px solid #76b830; border-bottom:1px solid #ddd;}
.find-result h4 {font-size:var(--font-size-22); font-weight:700; line-height:1.4em; color:#121212; margin-bottom:10px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:#121212; font-size:var(--font-size-30); font-weight:800; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; font-size:var(--font-size-18); line-height:1.7em; margin-bottom:var(--space-50);}
.member-leave .txt .tit {color:#121212; font-size:var(--font-size-24); font-weight: 800; line-height:1.3em; margin-bottom:var(--space-15);}
.member-leave .form {max-width:550px; margin:0 auto var(--space-60);}
.member-leave .group {margin-bottom:var(--space-26);}
.member-leave .group label {display:block; margin-bottom:var(--space-10); color:#121212; font-size:var(--font-size-20); font-weight:800; line-height:1.3em;}
.member-leave .group .input-area {position:relative;}
.member-leave .group .icon {position:absolute; top:50%; left:20px; margin-top:-10px; width:20px; height:20px;}
.member-leave .group .input {display:block; width:100%; height:60px; padding-left:64px; font-size:var(--font-size-18); border-radius:var(--radius-8);}
.member-leave .group .input::placeholder {color:#ccc;}