/* BASIC css start */
/* BASIC css start */
/* ============================================================
[1] 서버 원본 그대로 - 손대지 않는다
============================================================ */
#login .login #keyboard {margin-top:20px; padding:0 15px;}
#login .tab {padding:0 15px; margin-top:30px;}
#login .tab a {width:50%; height:34px; border:1px solid #bdbdbd; border-top:3px solid #bdbdbd; border-bottom:1px solid #000; display: inline-block; text-align: center; line-height: 30px; box-sizing: border-box; background-color:#fbfbfb; }
#login .tab a.act {color:#000; background-color:#fff; border:1px solid #000; border-top:3px solid #000; border-bottom:0px none; font-weight:bold;}
#login .login .loginInput {margin-top: 10px;}
#login .nonmember {margin-top:20px; display:none;}
#login .nonmember fieldset {padding:0 15px;}
#inquiryOrder { display:none; }
#inquiryOrder .txt { margin:15px 15px 0; padding:0; }
#inquiryOrder .frm { overflow:hidden; width:200px; margin:35px auto 0; }
#inquiryOrder .frm dt,
#inquiryOrder .frm dd { float:left; }
#inquiryOrder .frm dt { width:60px; margin-top:5px; line-height:32px; font-weight:bold; letter-spacing:-1px; }
#inquiryOrder .frm dd { width:140px; }
#inquiryOrder .frm input[type=text] { width:100%; height:32px; line-height:32px; margin-top:5px; padding:0 5px; border:1px solid #c6c6c6; background:#fbfbfb; border-radius:0; }
#inquiryOrder .btns { margin:40px 10px 20px; }
#inquiryOrder .btns a { margin-top:10px; }
/* ============================================================
[2] 리뉴얼 디자인 오버라이드
design set 29306 . 스코프 #login
.nonmember / #inquiryOrder 의 display 는 절대 건드리지 않는다
(탭 전환 JS 가 그 값을 제어한다)
============================================================ */
#login{
--ink:#222;
--sub:#666;
--muted:#888;
--line:#ddd;
--line2:#ccc;
--soft:#f7f7f7;
--green:#438D46;
--green-d:#367038;
--price:#ff3c00;
display:block;
padding:0 0 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;
}
#login *{box-sizing:border-box;}
#login fieldset{
min-width:0;
max-width:100%;
margin:0;
padding:0 20px;
border:0;
}
#login legend{
position:absolute;
width:1px; height:1px;
margin:-1px; padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
#login form{margin:0;}
#login .nonmember fieldset{padding:0 20px;}
/* ------------------------------------------------------------
탭 - 박스형에서 밑줄형으로
------------------------------------------------------------ */
#login .tab{
display:flex;
margin:16px 0 22px;
padding:0 20px;
border:0;
background:none;
}
#login .tab a{
flex:1 1 0;
min-width:0;
display:block;
width:auto;
height:46px;
line-height:44px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
font-size:14.5px;
font-weight:700;
color:var(--muted);
background:none;
border:0;
border-bottom:2px solid var(--line);
}
#login .tab a.act{
color:var(--green);
background:none;
font-weight:800;
border:0;
border-bottom:2px solid var(--green);
}
/* ------------------------------------------------------------
입력칸
------------------------------------------------------------ */
#login .login .loginInput{
position:relative;
display:flex;
flex-direction:column;
gap:8px;
margin-top:0;
}
#login .login .loginInput + .loginInput{margin-top:8px;}
#login .loginInput input[type="text"],
#login .loginInput input[type="password"],
#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;
}
#login .loginInput input::placeholder{color:var(--muted); font-weight:400;}
#login .loginInput input:focus{
outline:0;
border-color:var(--green);
box-shadow:0 0 0 2px rgba(67,141,70,.12);
}
#login .loginInput input:-webkit-autofill,
#login .loginInput input:-webkit-autofill:hover,
#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 생성) */
#login .gj-pw-wrap{position:relative; display:block; width:100%;}
#login .gj-pw-wrap input{padding-right:48px !important;}
#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;
}
#login .gj-pw-toggle.is-on{color:var(--green);}
/* ------------------------------------------------------------
체크박스 3종
------------------------------------------------------------ */
#login .loginCheck{
display:flex;
flex-wrap:wrap;
gap:2px 14px;
margin:12px 0 16px;
padding:0;
border:0;
background:none;
}
#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;
}
#login .loginCheck input[type="checkbox"]{
flex:0 0 auto;
width:17px;
height:17px;
margin:0;
accent-color:var(--green);
}
/* ------------------------------------------------------------
버튼 - common.css 의 !important 규칙 상쇄
------------------------------------------------------------ */
#login .loginMiddle{
display:flex;
flex-direction:column;
gap:8px;
margin:0;
}
#login .loginMiddle .btn_Red,
#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;
}
#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;
}
#login .loginMiddle .btn_Red:active{
background:var(--green-d) !important;
border-color:var(--green-d) !important;
}
#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;
}
/* ------------------------------------------------------------
비회원 주문조회
------------------------------------------------------------ */
#login .nonmember h3{
margin:0 0 12px;
padding:0;
font-size:16px;
font-weight:800;
color:var(--ink);
letter-spacing:-0.02em;
background:none;
border:0;
}
#login .nonmember .loginMiddle{margin-top:12px;}
/* ------------------------------------------------------------
하단 회원가입 안내
------------------------------------------------------------ */
#login .loginBottom{
margin:26px 20px 0;
padding:18px 16px;
border:1px solid var(--line);
border-radius:4px;
background:var(--soft);
text-align:center;
}
#login .loginBottom h4,
#login .loginBottom .bold{
margin:0 0 6px;
padding:0;
font-size:14px;
font-weight:800;
color:var(--ink);
background:none;
border:0;
}
#login .loginBottom p{
margin:0 0 14px;
font-size:12.5px;
line-height:1.6;
color:var(--sub);
}
#login .loginBottom p.bold{margin:0 0 6px;}
#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;
}
/* ------------------------------------------------------------
한글 자판 영역
------------------------------------------------------------ */
#login .login #keyboard{margin-top:14px; padding:0 20px; text-align:right;}
#login .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;
}
#login .login #keyboard img{max-width:100%; height:auto; margin-top:8px;}
/* ------------------------------------------------------------
주문번호 중복 팝업
display 는 원본 규칙과 JS 가 제어하므로 손대지 않는다
------------------------------------------------------------ */
#inquiryOrder .layer-pop{
position:relative;
max-width:420px;
margin:0 auto;
padding:20px 16px;
border-radius:4px;
background:#fff;
}
#inquiryOrder .layer-pop h3{
margin:0 0 10px;
padding:0;
font-size:16px;
font-weight:800;
color:#222;
background:none;
border:0;
}
#inquiryOrder .layer-pop .close{
position:absolute;
top:10px;
right:10px;
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
color:#888;
text-decoration:none;
}
#inquiryOrder .txt{
margin:0 0 16px;
padding:0;
font-size:12.5px;
line-height:1.6;
color:#666;
}
#inquiryOrder .txt strong{color:#ff3c00; font-weight:800;}
#inquiryOrder .frm{
overflow:visible;
width:auto;
margin:0 0 16px;
}
#inquiryOrder .frm dt,
#inquiryOrder .frm dd{float:none;}
#inquiryOrder .frm dt{
width:auto;
margin:0 0 6px;
line-height:1.4;
font-size:12.5px;
font-weight:700;
color:#666;
letter-spacing:-0.02em;
}
#inquiryOrder .frm dd{
display:flex;
flex-direction:column;
gap:8px;
width:auto;
margin:0 0 12px;
}
#inquiryOrder .frm input[type=text]{
width:100%;
height:44px;
line-height:normal;
margin:0;
padding:0 12px;
border:1px solid #ccc;
border-radius:4px;
background:#fff;
font-size:13.5px;
font-family:inherit;
}
#inquiryOrder .frm input[type=text]:focus{
outline:0;
border-color:#438D46;
box-shadow:0 0 0 2px rgba(67,141,70,.12);
}
#inquiryOrder .btns{
display:flex;
gap:8px;
margin:0;
}
#inquiryOrder .btns a{
flex:1 1 0;
min-width:0;
display:flex !important;
align-items:center;
justify-content:center;
float:none !important;
width:auto !important;
max-width:none !important;
height:44px !important;
min-height:44px !important;
line-height:1 !important;
margin:0 !important;
padding:0 10px !important;
border-radius:4px !important;
font-size:13.5px !important;
font-weight:700 !important;
font-family:inherit;
text-decoration:none;
}
#inquiryOrder .btns .btn_Grey{
background:#438D46 !important;
border:1px solid #438D46 !important;
color:#fff !important;
}
#inquiryOrder .btns .btn_Black{
background:#fff !important;
border:1px solid #ccc !important;
color:#666 !important;
}
/* ------------------------------------------------------------
넓은 화면
------------------------------------------------------------ */
@media (min-width:640px){
#login fieldset,
#login .nonmember fieldset,
#login .tab,
#login .login #keyboard{padding-left:20px; padding-right:20px;}
#login .loginBottom{margin-left:20px; margin-right:20px;}
#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;
}
/* 주문서 로그인은 간편로그인이 fieldset(좌우 20px) 안에 들어 있다.
거기에 또 20px 을 주면 두 번 먹어서 혼자 좁아지므로 그 경우엔 0 으로 둔다. */
#contents fieldset .sns-login{
margin-left:0 !important;
margin-right:0 !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 */