@charset "utf-8";

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.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: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:10px; border-radius:8px;}
.login-content .btn-pack.focus {margin-top:30px;}
.login-content .btn-pack.xlarge {font-weight:500; font-size: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.login-content .btn-pack.gray {background: #F4F4F4 !important; border-color: #F4F4F4; color: var(--color-body) !important;}

.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;}

/* 약관동의 */
.agree-wrap {max-width:680px; margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#333; font-size:20px; font-weight:600; 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:var(--color-primary); border-color:var(--color-primary); background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:14px; 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 .required {color:#F00}
.join-form .join-form-txt {color:#505050; font-weight:400; line-height:1.4em; margin-bottom:12px; text-align: right;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #868686; font-size:16px; line-height:1.5em;}
.join-form table th {padding:var(--padding-20); border:1px solid #ddd; background:#FEF5EB; font-weight:600; color:#121212;}
.join-form table td {padding:var(--padding-20); border:1px solid #ddd; color:#505050;}
.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 input[readonly] {background-color:#fff; color:#505050;}
.join-form .input {border-radius:8px; height: clamp(42px, calc( 60 / var(--inner) * 100vw ), 60px);}
.join-form .btn-pack {border-radius: 8px; height: clamp(42px, calc( 60 / var(--inner) * 100vw ), 60px) !important; line-height: clamp(40px, calc( 58 / var(--inner) * 100vw ), 58px) !important;} 
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form + .buttons {margin-top:60px;}

.join-profile {display:flex; flex-direction:column; align-items:center; gap:var(--padding-20); margin-bottom:var(--padding-60);}
.join-profile-photo {width:clamp(120px, calc( 150 / var(--inner) * 100vw ), 150px); height:clamp(120px, calc( 150 / var(--inner) * 100vw ), 150px); overflow:hidden; border-radius: 50%;}
.join-profile-photo img {width:100%; height:100%; object-fit:cover;}
.join-profile-btn {display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border:1px solid #ddd; border-radius:8px; font-size:var(--font-size-16); font-weight:400; letter-spacing:-0.03em; color:#505050; line-height:1; cursor:pointer; background:#fff;}

.join-agree {margin-top:var(--padding-60);}
.join-agree-tit {display:flex; align-items:center; gap:8px; margin-bottom:var(--padding-20); font-size:var(--font-size-18); font-weight:600; letter-spacing:-0.03em; color:#121212; line-height:1.3;}
.join-agree-tit::after {content:""; width:5px; height:5px; border-radius:50%; background:var(--color-primary);}
.join-agree-all {display:flex; align-items:flex-end; gap:var(--padding-20); margin-bottom:10px; padding:var(--padding-20); border:1px solid #ddd; border-radius:8px; background:#fff;}
.join-agree-all .checkbox label {font-size:var(--font-size-16); font-weight:600; color:#121212;}
.join-agree-all .checkbox label:before {width:20px; height:20px; margin:-0.2em var(--padding-20) 0 0; border-radius:4px; border:1px solid #ddd; background-color:#fff;}
.join-agree-all .checkbox input:checked + label:before {background:var(--color-primary) url("/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-primary);}
.join-agree-box {padding:var(--padding-20); border-radius:8px; background:#fef5eb;}
.join-agree-list {display:flex; flex-direction:column; gap:15px;}
.join-agree-item {display:flex; align-items:center; flex-wrap:wrap; gap:var(--padding-20);}
.join-agree-item .label {width:175px; font-size:var(--font-size-14); color:#505050; letter-spacing:-0.03em; line-height:1.3;}
.join-agree-item .checkbox {flex-shrink:0; margin-top:0;}
.join-agree-item .checkbox label {display:inline-block; vertical-align:middle;}
.join-agree-item .checkbox label:before {width:20px; height:20px; margin:0; border-radius:4px; border:1px solid #ddd; background-color:#fff;}
.join-agree-item .checkbox input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary); background-image:url("/images/bbs/checkbox.svg");}
.join-agree-item .btn-view {display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:24px; padding:0 7px; border:1px solid #ddd; border-radius:4px; font-size:12px; font-weight:500; letter-spacing:-0.03em; color:#505050; line-height:1; background:#fff;}
.join-agree + .buttons {margin-top:var(--padding-50);}

.inputtext {display: flex;align-items: center;height: clamp(42px, calc( 60 / var(--inner) * 100vw ), 60px);}


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

.join-list {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--padding-40); }
.join-card {width: calc((100% - 2 * var(--padding-40)) / 3 ); max-width:100%; padding:var(--padding-50) var(--padding-20); border:1px solid #ddd; border-radius:16px; background:#fff; box-sizing:border-box;}
.join-card-qr {border-color:var(--color-primary); background:#fef5eb;}
.join-card-inner {display:flex; flex-direction:column; align-items:center; gap:var(--padding-40);}
.join-card-top {display:flex; flex-direction:column; align-items:center; gap:var(--padding-30); width:100%;}
.join-qr-box {display:flex; align-items:center; justify-content:center; padding:var(--padding-10); border:1px solid #ddd; border-radius:16px; background:#fff;}
.join-qr-box img {width:clamp(80px, calc( 130 / var(--inner) * 100vw ), 130px); height:clamp(80px, calc( 130 / var(--inner) * 100vw ), 130px);}
.join-card-icn {width:clamp(100px, calc( 150 / var(--inner) * 100vw ), 150px); height:clamp(100px, calc( 150 / var(--inner) * 100vw ), 150px); overflow:hidden; border-radius:16px;}
.join-card-icn img {width:100%; height:100%; object-fit:contain;}
.join-card-tit {font-size:var(--font-size-24); font-weight:700; letter-spacing:-0.03em; color:#121212; text-align:center; line-height:1.3;}
.join-card-btn {display:inline-flex; align-items:center; justify-content:center; padding:14px 24px; border-radius:99px; font-size:var(--font-size-18); font-weight:600; letter-spacing:-0.03em; line-height:1; white-space:nowrap;}
.join-card-btn.btn-primary {background:var(--color-primary); color:#fff;}
.join-card-btn.btn-gray {background:#f4f4f4; color:#505050;}
.join-lasttext {display: inline-flex;flex-direction: column; align-items: center; gap: var(--padding-15); margin-top: var(--padding-60); text-align:center; width: 100%;}
.join-lasttext .txt {display: inline-block; position: relative; padding-left:16px; font-size: var(--font-size-18); color: var(--color-body); text-align: left;}
.join-lasttext .txt::before {content: ""; position: absolute; left: 0; top:8px;  width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%;}

.modal {padding:var(--padding-60) var(--padding-30);}
.modal .title {margin-bottom: var(--padding-60); font-size: var(--font-size-32); font-weight: bold;}
.modal .bulletlist {margin-bottom: var(--padding-40); list-style: auto; padding-left: 20px; display: flex;flex-direction: column;gap: var(--padding-30);}
.modal .bulletitem {padding-left: 5px; font-size: var(--font-size-18); line-height: 1.77; color: var(--color-body); letter-spacing: -0.8px;}
.qr-guide-box {display:flex; flex-direction:column; align-items:center; gap:var(--padding-30); padding:var(--padding-50); border:1px solid var(--color-primary); border-radius:16px; background:#fef5eb;}
.qr-guide-tit {font-size:var(--font-size-24); font-weight:700; letter-spacing:-0.03em; color:#121212; text-align:center; line-height:1.3;}
.qr-guide-qr {display:flex; align-items:center; justify-content:center; width:clamp(120px, calc( 140 / var(--inner) * 100vw ), 140px); height:clamp(120px, calc( 140 / var(--inner) * 100vw ), 140px); padding:var(--padding-10); border:1px solid #ddd; border-radius:16px; background:#fff; box-sizing:border-box;}
.qr-guide-qr img {width:100%; height:100%; object-fit:contain;}
.qr-guide-steps {display:flex; flex-direction:column; align-items:center; gap:15px; margin:0; padding:0; list-style:none;}
.qr-guide-steps li {display:flex; align-items:center; gap:10px; font-size:var(--font-size-16); font-weight:600; letter-spacing:-0.03em; color:#505050; line-height:1.3;}
.qr-guide-steps .num {width:15px; flex-shrink:0;}


/* 가입완료 */
.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-primary) 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:470px; 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: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; border-radius: 8px;}
.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;}

/* 회원탈퇴 */
.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%;}