@charset "UTF-8";

.login-wrap {width:35rem;max-width:100%;margin:0 auto;padding:6rem 0;}

.login__title {font-size:var(--font-b);text-align:center;margin-bottom:3rem;line-height:140%;}

.login__ip {margin-bottom:3rem;}
.login__ip .item {display:flex;gap:2rem;align-items:center;height:5rem;padding:0 2rem;background:var(--bg-lgray);border-radius:10px;}
.login__ip .item + .item {margin-top:1rem;}
.login__ip .item .ico {flex:none;width:1.4rem;height:1.9rem;background-repeat:no-repeat;background-position:center center;}
.login__ip .item .ico.id {background-image:url(../img/Login/login_id.svg);}
.login__ip .item .ico.pw {background-image:url(../img/Login/login_pw.svg);}
.login__ip input {flex:1;border:none !important;padding:0 !important;background:none !important;box-shadow:none !important;min-width:0;}
.login__ip input::placeholder {color:#C9CFDA !important;}
.login__ip input:focus {outline:none;}
.login__ip input::-ms-reveal {display: none;}
.login__ip .item:has(input:focus) {outline:auto;outline-offset: -1px;}

.login__infotxt {line-height:140%;font-size:var(--font-ms);color:var(--font-bgray);text-align:center;margin-bottom:3rem;}
.login-btn {display:block;width:100%;height:6rem;display:flex;align-items:center;justify-content:center;margin-bottom:3rem;background:var(--gradient);color:#fff;font-weight:600;border-radius:10px;font-size:var(--font-m);box-shadow:5px 5px 20px rgba(236, 0, 140, 0.2);}
.login__otherbox {display:flex;align-items:center;justify-content:center;margin-bottom:5rem;}
.login__otherbox .other_link {padding-right:2rem;margin-right:2rem;position:relative;}
.login__otherbox .other_link:last-child {padding-right:0;margin-right:0;}
.login__otherbox .other_link:before {content:"";display:block;width:1px;height:12px;background:var(--border-gray);position:absolute;top:50%;right:0;margin-top:-6px;}

.login__sns .tit {text-align:center;margin-bottom:2rem;}
.login__sns .lst {display:flex;align-items:center;justify-content:center;gap:1.2rem;container:login__sns__lst / inline-size;}
.login__sns .lst a {flex:none;display:flex;align-items:center;justify-content:center;width:5rem;height:5rem;padding:1rem;border-radius:50%;box-shadow:5px 5px 20px rgba(0, 0, 0, 0.1);}
.login__sns .lst a:before {content:"";display:block;max-width:100%;max-height:100%;}
.login__sns .lst a.kakao {background:#FFE600;}
.login__sns .lst a.naver {background:#3CB549;}
.login__sns .lst a.google {background:#C9CFDA;}
.login__sns .lst a.facebook {background:#4562A0;}
.login__sns .lst a.x {background:#000;}
.login__sns .lst a.kakao:before {width:2.7rem;height:2.4rem;background:url(../img/Login/login_sns_kakao.svg) no-repeat center center /100% 100%;}
.login__sns .lst a.naver:before {width:1.7rem;height:1.6rem;background:url(../img/Login/login_sns_naver.svg) no-repeat center center /100% 100%;}
.login__sns .lst a.google:before {width:2.4rem;height:2.4rem;background:url(../img/Login/login_sns_google.svg) no-repeat center center /100% 100%;}
.login__sns .lst a.facebook:before {width:1.1rem;height:2.2rem;background:url(../img/Login/login_sns_facebook.svg) no-repeat center center /100% 100%;}
.login__sns .lst a.x:before {width:2.3rem;height:2.2rem;background:url(../img/Login/login_sns_x.svg) no-repeat center center /100% 100%;}

	@container login__sns__lst (width < 350px) {
		.login__sns .lst a {width:4rem;height:4rem;}
	}