@charset "utf-8";
/* 로그인 */
body:has(.login-area) #contArea {max-width:none; padding-left:0; padding-right:0;}
body:has(.login-area) .real-cont {padding-bottom:0; min-height:0;}
.login-area {display:flex; align-items:center; justify-content:center; width:100%; height:calc(100vh - var(--header-height, 80px) - var(--footer-height, 0px));}
.login-content {width:100%; max-width:800px; padding:80px 140px; background:#fafafa; border:1px solid #eee; border-radius:8px;}
.login-tit {margin-bottom:70px; color:#2c2c2c; font-size:var(--font-size40); font-weight:600; line-height:1.35em; letter-spacing:-0.8px; text-align:center;}
.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:3.3333em;}
.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 + .group {margin-top:16px;}
.login-content .group .input {display:block; width:100%; height:60px; padding:20px; color:#2c2c2c; font-weight:400; line-height:1.5em; letter-spacing:-0.32px; background:#fff; border:1px solid #ddd; border-radius:4px;}
.login-content .group .input::placeholder {color:#878787;}
.login-content .links {display:flex; align-items:center; justify-content:space-between; margin-top:16px; color:#505050; font-weight:400; line-height:1.5em; letter-spacing:-0.32px;}
.login-content .links a {color:#505050;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .links .bar {display:inline-block; vertical-align:middle; width:1px; height:10px; margin:0 10px; background:#ddd;}
.login-content .checkbox label {color:#505050; font-weight:400; line-height:1.5em; letter-spacing:-0.32px;}
.login-content .checkbox label:before {width:18px; height:18px; margin:0 10px 0 0; background:#fff; border:1px solid #ddd; border-radius:4px;}
.login-content .btns {display:flex; flex-direction:column; gap:10px; margin-top:60px;}
.login-content .btn-pack {display:block; width:100%; height:auto; min-width:0; margin:0; padding:20px; color:#fff; font-weight:600; line-height:1.5em; letter-spacing:-0.32px; border:0; border-radius:4px;}
.login-content .btn-pack.focus {background:var(--color-primary); border:0;}
.login-content .btn-pack.dark {background:#2c2c2c; border:0;}

.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 { display: flex; padding-left: 70px; width: 100%; border-radius: 8px; height: 60px; align-items: center; justify-content: flex-start;}
.sns-login a .icon { width: 80px; display: inline-flex; align-items: center;}
.sns-login a span { display: inline-block; flex: 1 1 auto; min-width: 0; width: 1%; font-size: 20px; font-weight: 600; line-height: 1.2em; text-align: left; }
.sns-login a.kakao-bg { background: #fde40b; color: #242424; margin-bottom: 10px; }
.sns-login a.naver-bg { background: #06be34; color: #fff; }

/* 약관동의 / 회원가입 공통 */
.agree-form,
.join-wrap {display:flex; flex-direction:column; align-items:center; gap:70px;}
.mem-btn {display:inline-flex; align-items:center; justify-content:center; padding:14px 24px; background:#fff; border:1px solid #2c2c2c; border-radius:80px; color:#2c2c2c; font-size:var(--font-size20); font-weight:600; line-height:1.7em; letter-spacing:-0.4px; cursor:pointer;}
.join-wrap .buttons .cen {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;}

/* 약관동의 */
.agree-wrap {display:flex; flex-direction:column; gap:40px; width:100%; max-width:980px; margin:0 auto;}
.agree-wrap .group {display:flex; flex-direction:column; gap:20px; margin:0;}
.agree-wrap .agree-tit {color:#2c2c2c; font-size:var(--font-size20); font-weight:600; line-height:1.3em; letter-spacing:-0.4px;}
.agree-wrap .agree-tit .checkbox label {color:#2c2c2c; font-size:var(--font-size20); font-weight:600; letter-spacing:-0.4px;}
.agree-wrap .agree-tit .checkbox label:before {content:""; display:inline-block; width:24px; height:24px; margin:-.1em 10px 0 0; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; background-size:11px; border:1px solid #ddd; border-radius:50%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background:var(--color-primary) url("../images/member/checkbox_on.png") 50% 50% no-repeat; background-size:12px; border-color:var(--color-primary);}
.agree-wrap .agree-box {position:relative; width:100%; height:230px; max-height:230px; padding:20px; background:#fff; border:1px solid #eee; border-radius:8px; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#505050; font-weight:400; line-height:1.875em; letter-spacing:-0.32px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#505050; font-weight:400; margin-bottom:0; line-height:1.875em;}
.agree-wrap .agree-box .terms-wrap .sec p {margin-bottom:0; line-height:1.875em;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}
.agree-wrap .agree-box .terms-wrap .sec ul {margin:0; padding-left:24px; list-style:disc;}
.agree-wrap .agree-box .terms-wrap .sec ul li {line-height:1.875em;}
.agree-type {width:100%; padding-top:40px; border-top:1px solid #eee;}
.agree-type h3 {margin-bottom:24px; color:#2c2c2c; font-size:var(--font-size24); font-weight:600; line-height:1.5833em; letter-spacing:-0.48px;}
.agree-type-list {display:flex; gap:12px; width:100%;}
.agree-type-item {position:relative; display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-width:0; padding:30px 16px; background:#f8f8f8; border-radius:8px; cursor:pointer;}
.agree-type-item input {position:absolute; width:0; height:0; opacity:0;}
.agree-type-item .ico {width:32px; height:32px; background-position:center; background-repeat:no-repeat; background-size:contain;}
.agree-type-item .ico:after {content:""; display:block; width:20px; height:1px; margin:10px auto 0; background:#ddd;}
.agree-type-item.shopper .ico {background-image:url("../images/member/agree-ico1.png");}
.agree-type-item.client .ico {background-image:url("../images/member/agree-ico2.png");}
.agree-type-item strong {color:#2c2c2c; font-size:var(--font-size20); font-weight:500; line-height:1.7em; letter-spacing:-0.4px;}
.agree-type-item:has(input:checked) {background:var(--color-primary);}
.agree-type-item:has(input:checked) strong {color:#fff;}
.agree-type-item:has(input:checked) .ico:after {background:rgba(255,255,255,0.5);}
.agree-type-item.shopper:has(input:checked) .ico {background-image:url("../images/member/agree-ico1-w.png");}
.agree-type-item.client:has(input:checked) .ico {background-image:url("../images/member/agree-ico2-w.png");}

.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 {display:flex; flex-direction:column; gap:20px; width:100%; max-width:980px; margin:0 auto; padding:40px 0; border-top:2px solid #2c2c2c; border-bottom:1px solid #ddd;}
.join-row {display:flex; align-items:center; width:100%;}
.join-row.type {align-items:flex-start;}
.join-lbl {flex-shrink:0; width:180px; padding:16px 0; color:#2c2c2c; font-size:var(--font-size18); font-weight:600; line-height:1.5556em; letter-spacing:-0.36px;}
.join-field {display:flex; flex:1; flex-direction:column; gap:10px; min-width:0;}
.join-type-name {padding:16px 0; color:#505050; font-size:var(--font-size18); font-weight:500; line-height:1.5556em; letter-spacing:-0.36px;}
.join-type-line {display:flex; flex:1; align-items:center; gap:10px; min-width:0; padding:16px 0;}
.join-type-line .join-type-name {padding:0;}
.join-type-sub {position:relative; padding-left:11px; color:#878787; font-size:var(--font-size18); font-weight:500; line-height:1.5556em; letter-spacing:-0.36px;}
.join-type-sub:before {content:""; position:absolute; left:0; top:50%; width:1px; height:12px; background:#ddd; transform:translateY(-50%);}
.join-txt {display:flex; flex:1; align-items:center; min-height:60px; color:#505050; font-weight:400; line-height:1.5em; letter-spacing:-0.32px;}
.join-form .input {flex:1 1 auto; min-width:0; width:100%; height:60px; padding:0 20px; color:#2c2c2c; font-weight:400; line-height:1.5em; letter-spacing:-0.32px; background:#fff; border:1px solid #ddd; border-radius:4px;}
.join-form .input::placeholder {color:#878787;}
.join-id {display:flex; flex:1; gap:8px; min-width:0;}
.join-id .input {flex:1;}
.join-id .btn-dup {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; padding:17px 22px; background:#1c1c1c; color:#fff; font-weight:600; line-height:1.625em; letter-spacing:-0.32px; border:0; border-radius:4px;}
.join-role {display:flex; gap:10px; width:100%;}
.join-role-item {position:relative; display:flex; flex:1; flex-direction:column; gap:10px; min-width:0; padding:14px 10px 10px 16px; background:#fff; border:1px solid #eee; border-radius:4px; cursor:pointer; transition: .2s;}
.join-role-item input {position:absolute; width:0; height:0; opacity:0;}
.join-role-item strong {color:#505050; font-size:var(--font-size18); font-weight:600; line-height:1.5556em; letter-spacing:-0.36px;}
.join-role-item p {color:#878787; font-weight:400; line-height:1.5em; letter-spacing:-0.32px;}
.join-role-item .ico {align-self:flex-end; width:40px; height:40px; background-color:#ece9f8; background-position:center; background-repeat:no-repeat; background-size:20px; border-radius:4px;}
.join-role-item.ico1 .ico {background-image:url("../images/member/join-ico1.png");}
.join-role-item.ico2 .ico {background-image:url("../images/member/join-ico2.png");}
.join-role-item.ico3 .ico {background-image:url("../images/member/join-ico3.png");}
.join-role-item:has(input:checked) {border-color:var(--color-primary);}
.join-role-item:has(input:checked) strong {color:var(--color-primary);}
.join-role-item:has(input:checked) .ico {background-color:var(--color-primary);}
.join-role-item.ico1:has(input:checked) .ico {background-image:url("../images/member/join-ico1-w.png");}
.join-role-item.ico2:has(input:checked) .ico {background-image:url("../images/member/join-ico2-w.png");}
.join-role-item.ico3:has(input:checked) .ico {background-image:url("../images/member/join-ico3-w.png");}
.join-role-item:hover {border-color:var(--color-primary);}
.join-role-item:hover strong {color:var(--color-primary);}
.join-role-item:hover .ico {background-color:var(--color-primary);}
.join-role-item.ico1:hover .ico {background-image:url("../images/member/join-ico1-w.png");}
.join-role-item.ico2:hover .ico {background-image:url("../images/member/join-ico2-w.png");}
.join-role-item.ico3:hover .ico {background-image:url("../images/member/join-ico3-w.png");}
@media (max-width:1024px) {
	.agree-type-list {flex-direction:column;}
	.join-form {padding:24px 0; gap:16px;}
	.join-row {flex-wrap:wrap; gap:12px;}
	.join-lbl {width:100%; padding:0;}
	.join-id {flex-wrap:wrap;}
	.join-role {flex-direction:column;}
}

.file-upload {display:flex; height:44px; max-width: 490px;}
.file-button {display:flex; justify-content:center; align-items:center; height:100%; width: 44px; border: 1px solid #aaa; background: transparent url(../images/member/upload-ico.png) center no-repeat; background-size: 21px; text-indent: -9999em;}
.file-name {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; height:100%; padding:0 14px; border:1px solid #ddd; color: #999; font-size: 15px; font-weight: 300; border-right: none; }

/* 가입완료 */
body:has(.join-complete) #contArea {max-width:none; padding-left:0; padding-right:0;}
body:has(.join-complete) .real-cont,
body:has(.join-complete) .real-cont.fx {display:flex; align-items:center; justify-content:center; min-height:0; padding-bottom:0; height:calc(100vh - var(--header-height, 100px) - var(--footer-height, 0px));}
.join-complete {display:flex; flex-direction:column; align-items:center; width:100%; max-width:800px; margin:0 auto; padding:80px 140px 100px; background:#fafafa; border:1px solid #eee; border-radius:8px; text-align:center;}
.join-complete .login-tit {margin-bottom:70px;}
.join-complete .icon {display:flex; align-items:center; justify-content:center; width:80px; height:80px; margin:0 0 50px; background:none; border-radius:0;}
.join-complete .icon img {width:100%; height:100%; object-fit:contain;}
.join-complete .tit {margin:0 0 30px; color:#2c2c2c; font-size:var(--font-size28); font-weight:600; line-height:1.5em; letter-spacing:-0.56px;}
.join-complete .tit em {color:var(--color-primary); font-style:normal; font-weight:600;}
.join-complete .txt {margin:0 0 70px; color:#505050; font-size:var(--font-size18); font-weight:400; line-height:1.7778em; letter-spacing:-0.36px;}
.join-complete .point {margin-bottom:40px; line-height:1em; font-size:28px; font-weight:700; color:#242424;}

/* 계정찾기 */
body:has(.find-area) #contArea {display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:none; min-height:calc(100vh - var(--header-height, 100px) - var(--footer-height, 0px)); padding:40px 20px;}
body:has(.find-area) .sub-title {width:100%; max-width:800px; margin:0; padding:80px 140px 0; background:#fafafa; border:1px solid #eee; border-bottom:0; border-radius:8px 8px 0 0; text-align:center;}
body:has(.find-area) .sub-title h1 {margin:0 0 40px; color:#2c2c2c; font-size:var(--font-size40); font-weight:600; line-height:1.35em; letter-spacing:-0.8px;}
body:has(.find-area) .real-cont,
body:has(.find-area) .real-cont.fx {width:100%; max-width:800px; min-height:0; margin:0; padding:0 140px 80px; background:#fafafa; border:1px solid #eee; border-top:0; border-radius:0 0 8px 8px;}
.find-area {max-width:none; margin:0;}
.find-tab {margin-bottom:40px; border-bottom:1px solid #eee;}
.find-tab ul {display:flex;}
.find-tab ul li {flex:1;}
.find-tab ul li a {display:block; color:#878787; font-weight:500; line-height:3em; letter-spacing:-0.32px; text-align:center;}
.find-tab ul li.active {position:relative;}
.find-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--color-primary);}
.find-tab ul li.active a {color:var(--color-primary); font-weight:600;}
.find-content .group + .group {margin-top:16px;}
.find-content .group .input {display:block; width:100%; height:60px; padding:20px; color:#2c2c2c; font-weight:400; line-height:1.5em; letter-spacing:-0.32px; background:#fff; border:1px solid #ddd; border-radius:4px;}
.find-content .group .input::placeholder {color:#878787;}
.find-content .btn-pack {display:block; width:100%; height:auto; min-width:0; margin:60px 0 0; padding:20px; color:#fff; font-weight:600; line-height:1.5em; letter-spacing:-0.32px; border:0; border-radius:4px;}
.find-content .btn-pack.focus {background:var(--color-primary); border:0;}
.find-result {margin-bottom:60px; padding:34px 20px; color:#505050; font-weight:400; line-height:1.625em; letter-spacing:-0.32px; text-align:center; background:#fff; border:1px solid #eee; border-radius:4px;}
.find-result h4 {margin-bottom:10px; color:#2c2c2c; font-size:var(--font-size18); font-weight:600; line-height:1.5556em;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {display:block; margin:8px 0; color:var(--color-primary); font-size:var(--font-size30); font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.leave-block {display:flex; flex-direction:column; gap:40px; width:100%; max-width:980px;}
.leave-note {width:100%; padding:30px 20px; color:#505050; font-weight:400; line-height:1.75em; letter-spacing:-0.32px; text-align:center; background:#fafafa; border:1px solid #eee; border-radius:8px;}
.leave-note .tit {margin-bottom:10px; color:#2c2c2c; font-size:var(--font-size18); font-weight:600; line-height:1.5556em;}
@media (max-width:640px){
.login-content .btn-pack, .login-content .btn-pack.xlarge, .find-content .btn-pack, .find-content .btn-pack.xlarge, .join-complete .btn-pack, .join-complete .btn-pack.xlarge {height:auto; min-width:0; padding:16px; font-size:inherit; line-height:1.5em;}
}