/* BASIC css start */
/* BASIC css start */
/* ============================================================
가자안전센터 모바일 - 회원 로그인 (/m/login.html)
design set 29306 . 스코프 : #contents .login
마크업 / 가상태그 무변경
★ 간편 로그인(.sns-login)은 규칙을 두지 않는다.
common.css 가 li{position:relative; padding-left:50px} +
li span{position:absolute; left:0; width:50px} 로 잡고 있어서
a 를 flex 로 바꾸거나 padding 을 주면 글자가 아이콘 밑으로 들어간다.
============================================================ */
#contents .login{
--ink:#222;
--sub:#666;
--muted:#888;
--line:#ddd;
--line2:#ccc;
--soft:#f7f7f7;
--green:#438D46;
--green-d:#367038;
--price:#ff3c00;
display:block;
padding-bottom:40px;
color:var(--ink);
font-size:13px;
line-height:1.5;
letter-spacing:-0.02em;
font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
#contents .login .member,
#contents .login .loginBottom{box-sizing:border-box;}
#contents .login .member *,
#contents .login .loginBottom *{box-sizing:border-box;}
#contents .login .member{
margin:16px 0 0;
padding:0 20px;
}
#contents .login .member fieldset{
min-width:0;
max-width:100%;
margin:0;
padding:0;
border:0;
}
#contents .login .member legend{
position:absolute;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
#contents .login .member form{margin:0;}
/* ------------------------------------------------------------
입력칸
------------------------------------------------------------ */
#contents .login .loginInput{
position:relative;
display:flex;
flex-direction:column;
gap:8px;
margin:0;
}
#contents .login .loginInput + .loginInput{margin-top:8px;}
#contents .login .loginInput input[type="text"],
#contents .login .loginInput input[type="password"],
#contents .login .loginInput input.login-input{
width:100%;
height:46px;
padding:0 12px;
border:1px solid var(--line2);
border-radius:4px;
background:#fff;
color:var(--ink);
font-size:13.5px;
font-family:inherit;
line-height:normal;
letter-spacing:-0.02em;
-webkit-appearance:none;
appearance:none;
}
#contents .login .loginInput input::placeholder{color:var(--muted); font-weight:400;}
#contents .login .loginInput input:focus{
outline:0;
border-color:var(--green);
box-shadow:0 0 0 2px rgba(67,141,70,.12);
}
/* 크롬 자동완성 파란 배경 제거 */
#contents .login .loginInput input:-webkit-autofill,
#contents .login .loginInput input:-webkit-autofill:hover,
#contents .login .loginInput input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--ink);
-webkit-box-shadow:0 0 0 1000px #fff inset;
box-shadow:0 0 0 1000px #fff inset;
transition:background-color 9999s ease-out 0s;
}
/* 비밀번호 표시 토글 (JS 생성) */
#contents .login .gj-pw-wrap{position:relative; display:block; width:100%;}
#contents .login .gj-pw-wrap input{padding-right:48px !important;}
#contents .login .gj-pw-toggle{
position:absolute;
top:0;
right:0;
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:46px;
padding:0;
color:var(--muted);
font-size:12px;
font-weight:700;
font-family:inherit;
text-decoration:none;
background:none;
border:0;
cursor:pointer;
}
#contents .login .gj-pw-toggle.is-on{color:var(--green);}
/* ------------------------------------------------------------
체크박스 3종
------------------------------------------------------------ */
#contents .login .loginCheck{
display:flex;
flex-wrap:wrap;
gap:2px 14px;
margin:12px 0 16px;
padding:0;
border:0;
background:none;
}
#contents .login .loginCheck label{
display:inline-flex;
align-items:center;
gap:6px;
min-height:26px;
margin:0;
padding:0;
font-size:12.5px;
font-weight:400;
color:var(--sub);
cursor:pointer;
}
#contents .login .loginCheck input[type="checkbox"]{
flex:0 0 auto;
width:17px;
height:17px;
margin:0;
accent-color:var(--green);
}
/* ------------------------------------------------------------
로그인 / 아이디 비밀번호 찾기
common.css 의 !important 규칙을 상쇄한다
------------------------------------------------------------ */
#contents .login .loginMiddle{
display:flex;
flex-direction:column;
gap:8px;
margin:0;
}
#contents .login .loginMiddle .btn_Red,
#contents .login .loginMiddle .btn_White{
display:flex !important;
align-items:center;
justify-content:center;
float:none !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 12px !important;
border-radius:4px !important;
text-decoration:none;
font-family:inherit;
letter-spacing:-0.02em;
}
#contents .login .loginMiddle .btn_Red{
height:50px !important;
min-height:50px !important;
line-height:1 !important;
background:var(--green) !important;
border:1px solid var(--green) !important;
color:#fff !important;
font-size:14.5px !important;
font-weight:700 !important;
}
#contents .login .loginMiddle .btn_Red:active{
background:var(--green-d) !important;
border-color:var(--green-d) !important;
}
#contents .login .loginMiddle .btn_White{
height:44px !important;
min-height:44px !important;
line-height:1 !important;
background:#fff !important;
border:1px solid var(--line2) !important;
color:var(--sub) !important;
font-size:13px !important;
font-weight:700 !important;
}
/* ------------------------------------------------------------
하단 회원가입 안내
------------------------------------------------------------ */
#contents .login .loginBottom{
margin:26px 20px 0;
padding:18px 16px;
border:1px solid var(--line);
border-radius:4px;
background:var(--soft);
text-align:center;
}
#contents .login .loginBottom h4,
#contents .login .loginBottom .bold{
margin:0 0 6px;
padding:0;
font-size:14px;
font-weight:800;
color:var(--ink);
background:none;
border:0;
}
#contents .login .loginBottom p{
margin:0 0 14px;
font-size:12.5px;
line-height:1.6;
color:var(--sub);
}
#contents .login .loginBottom h4.bold{margin:0 0 6px;}
#contents .login .loginBottom .btn_Black{
display:flex !important;
align-items:center;
justify-content:center;
float:none !important;
width:100% !important;
max-width:none !important;
height:44px !important;
min-height:44px !important;
line-height:1 !important;
margin:0 !important;
padding:0 12px !important;
border:1px solid var(--green) !important;
border-radius:4px !important;
background:#fff !important;
color:var(--green) !important;
font-size:13.5px !important;
font-weight:700 !important;
text-decoration:none;
}
/* ------------------------------------------------------------
한글 자판 영역 (보안 로그인 시 노출)
------------------------------------------------------------ */
#contents .login #keyboard{
margin-top:14px;
text-align:right;
}
#contents .login #keyboard a{
display:inline-flex;
align-items:center;
gap:5px;
min-height:26px;
padding:4px 2px;
font-size:12px;
color:var(--sub);
text-decoration:none;
}
#contents .login #keyboard img{max-width:100%; height:auto; margin-top:8px;}
/* ------------------------------------------------------------
넓은 화면
------------------------------------------------------------ */
@media (min-width:640px){
#contents .login .member{padding:0 20px;}
#contents .login .loginBottom{margin-left:20px; margin-right:20px;}
#contents .login .loginCheck{gap:2px 20px;}
}
/* ================================================================================
가자안전센터 모바일 - 로그인 화면 보완 (26.08.19 요청건 / 26.08.25 수정)
★ 로그인 3종(login / login_basket / login_order) 공통 보완
세 화면 모두 같은 간편로그인 묶음(.sns-login)을 쓰고
좌우 여백 기준도 셋 다 20px 라서 같은 블록을 씁니다.
1) 간편로그인 칸 가로 길이를 위 버튼과 같게
로그인 화면 CSS : .member / #login fieldset { padding:0 20px } → 버튼은 20px 안쪽
common.css : .sns-login { margin:20px 10px 0 } → 간편로그인은 10px 안쪽
그래서 간편로그인만 좌우로 10px 씩 더 튀어나와 있었습니다.
2) 「최근 로그인」 표시 감추기 [26.08.25 확정]
메이크샵이 안에 덧붙여 주는 안내 표시입니다.
실제 화면에서 확인해 보니 span.recent_login 이고
왼쪽 0 / 위 0 에 붙는 50x40 그림이라 SNS 아이콘 위에 정확히 겹쳐 있었습니다.
옆으로 옮기는 안과 감추는 안을 놓고 감추는 쪽으로 정했습니다.
로그인 동작에는 영향이 없습니다.
왼쪽 아이콘(첫 번째 span)은 그대로 두고, 그 뒤에 붙는 것만 감춥니다.
3) 최근 로그인 표시가 뜰 때 아래 안내칸이 비던 문제
이 표시가 페이지 기준으로 떠서 아래 칸을 덮는 경우를 막습니다.
li 를 기준칸으로 지정해 그 안에 가두고, 아래 안내칸을 위층으로 올립니다.
================================================================================ */
/* ---------- 1) 간편로그인 칸 너비 ---------- */
#contents .sns-login{
margin-left:20px !important;
margin-right:20px !important;
}
/* ---------- 2) 최근 로그인 표시 감추기 ---------- */
/* 표시가 새어 나가지 못하게 기준칸을 만들어 둔다 */
#contents .sns-login ul li{position:relative !important;}
/* ※ 에는 position 을 주지 않는다. 주면 왼쪽 SNS 아이콘의 기준칸까지 바뀌어
아이콘이 글자 위로 밀려 들어온다. (실제 화면에서 확인함) */
/* .sns-login 의 안에서 아이콘용 첫 span 을 뺀 나머지(= 최근 로그인 표시).
li 바로 아래에 붙는 경우도 함께 잡는다. */
#contents .sns-login ul li a > span:nth-of-type(n+2),
#contents .sns-login ul li a > *:not(span),
#contents .sns-login ul li > *:not(a){
display:none !important;
}
/* ---------- 3) 아래 안내칸이 가려지지 않게 ---------- */
#contents .login .loginBottom,
#login .loginBottom{
position:relative !important;
z-index:1 !important;
}
#contents .login .loginBottom h4,
#contents .login .loginBottom p,
#contents .login .loginBottom a,
#login .loginBottom h4,
#login .loginBottom p,
#login .loginBottom a{
visibility:visible !important;
opacity:1 !important;
}
/* BASIC css end */
/* BASIC css end */