@charset "utf-8";
/* ============================================================
   /m/mobile_login.asp 전용 스킨  (2026-08-02)
   - 마크업이 전 분양몰 공용이므로 CSS 도 공용 경로(/m/css/)에 두고 무조건 링크한다.
   - 모든 셀렉터는 html.page_m_login 으로 스코프 → 다른 페이지에 영향 없음.
   - 전역 commontotal.css 가 `.pageContainer .containerInner .loginBox ...` 처럼
     클래스 4개짜리 셀렉터를 쓰므로, 스코프 클래스를 두 번 겹쳐(.page_m_login.page_m_login)
     !important 없이 특이도로 이긴다.
   - 몰 메인컬러는 --sitecolor1 / --sitecolor3 를 그대로 승계한다.
   - 박스(카드)에는 음영을 넣지 않는다(테두리+라운딩만). 음영은 버튼에만.
   ============================================================ */

html.page_m_login{
	/* ── 메인컬러 승계 ── */
	--lg-primary:var(--sitecolor1, #17191f);
	--lg-tint:var(--sitecolor3, #f2f3f5);

	/* ── 면/배경 ── */
	--lg-bg:#f4f5f7;
	--lg-card:#ffffff;

	/* ── 라인(테두리·구분선) : 이 두 값만 쓴다 ── */
	--lg-line:#e7e9ed;
	--lg-line-strong:#d8dce3;

	/* ── 글자 ── */
	--lg-ink:#17191f;
	--lg-ink-sub:#5b6270;
	--lg-ink-mute:#98a0ad;

	/* ── 라운딩 ── */
	--lg-radius:16px;
	--lg-radius-sm:12px;

	/* ── 음영(버튼 전용) ── */
	--lg-shadow-btn:0 1px 2px rgba(16,24,40,.06), 0 6px 14px rgba(16,24,40,.12);
	--lg-shadow-btn-on:0 1px 2px rgba(16,24,40,.08), 0 10px 22px rgba(16,24,40,.20);
	--lg-ring:rgba(16,24,40,.10);

	--lg-danger:#d93a2b;
	--lg-danger-bg:#fdf2f1;

	--lg-font:'Pretendard Variable','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

/* 브랜드컬러 기반 음영/포커스링 (지원 브라우저만, 미지원은 위 중립값 사용) */
@supports (color: color-mix(in srgb, red 50%, transparent)){
	html.page_m_login{
		--lg-shadow-btn:0 1px 2px rgba(16,24,40,.06), 0 6px 14px color-mix(in srgb, var(--lg-primary) 22%, transparent);
		--lg-shadow-btn-on:0 1px 2px rgba(16,24,40,.08), 0 10px 22px color-mix(in srgb, var(--lg-primary) 34%, transparent);
		--lg-ring:color-mix(in srgb, var(--lg-primary) 16%, transparent);
	}
}

/* ── 폰트 : 모바일 base.css 는 로컬 Pretendard 를 선언하지 않는다.
      페이지에서 다이나믹 서브셋(Pretendard Variable)을 비차단으로 링크하고 여기서 적용. ──
   ※ 와일드카드(*)로 강제하면 .iconfont / .material-icons 리간처가 죽으므로 대상 지정. */
html.page_m_login #content,
html.page_m_login #content input,
html.page_m_login #content button,
html.page_m_login #content select,
html.page_m_login #content textarea,
html.page_m_login .top_fix_head,
html.page_m_login .top_fix_head h1{
	font-family:var(--lg-font);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
/* 아이콘 폰트는 되돌린다 */
html.page_m_login .iconfont,
html.page_m_login [class*=" ftic-"],
html.page_m_login [class^="ftic-"]{ font-family:"iconfont" !important; }
html.page_m_login .material-icons{
	font-family:'Material Icons';
	font-weight:normal; font-style:normal; letter-spacing:normal;
	text-transform:none; white-space:nowrap; direction:ltr;
}

/* ============================================================
   0. 상단 고정바
   ============================================================ */
html.page_m_login.page_m_login .top_fix_head{
	background:#fff;
	border-bottom:1px solid var(--lg-line);
	box-shadow:none;
}
html.page_m_login.page_m_login .top_fix_head h1{
	font-size:16px;
	font-weight:600;
	color:var(--lg-ink);
	letter-spacing:-.02em;
}

/* ============================================================
   1. 페이지 바탕 / 컨테이너
   ※ body{background} 는 건드리지 않는다(PC 폭에서 몰 배경이미지가 사라짐).
   ============================================================ */
html.page_m_login.page_m_login #content.pageContainer{
	background:var(--lg-bg);
	min-height:calc(100vh - 120px);
	padding-bottom:28px;
}
html.page_m_login.page_m_login #content .totar_width.containerInner{
	background:transparent;
	padding:16px 16px 0;
	max-width:520px;
	margin:0 auto;
}

/* 전체를 감싸는 loginBox 는 래퍼일 뿐 — 여백/배경 제거 */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox{
	padding:0;
	margin:0;
	background:transparent;
	border:0;
}

/* 공통 카드 — 음영 없이 테두리 + 라운딩만 */
html.page_m_login.page_m_login .pageContainer .containerInner .mlg-card{
	background:var(--lg-card);
	border:1px solid var(--lg-line);
	border-radius:var(--lg-radius);
	padding:20px 16px 22px;
	margin:0 0 12px;
}

/* ============================================================
   2. 입력칸
   ============================================================ */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input{
	margin:0 0 14px;
	padding:0;
	border:0;
	background:none;
}
html.page_m_login.page_m_login .loginBox .member_input.mb20,
html.page_m_login.page_m_login .loginBox .member_input.mb10{ margin-bottom:14px; }

html.page_m_login.page_m_login .loginBox .member_input .tit{
	display:block;
	margin:0 0 7px;
	font-size:13px;
	font-weight:600;
	line-height:1.3;
	color:var(--lg-ink-sub);
	letter-spacing:-.01em;
}

html.page_m_login.page_m_login .loginBox .member_input .inputBox{
	position:relative;
	display:block;
}

html.page_m_login.page_m_login .loginBox .member_input input.text,
html.page_m_login.page_m_login .loginBox .member_input input[type="text"],
html.page_m_login.page_m_login .loginBox .member_input input[type="password"],
html.page_m_login.page_m_login .loginBox .member_input input[type="tel"]{
	width:100%;
	height:52px;
	line-height:normal;
	box-sizing:border-box;
	padding:0 52px 0 14px;
	margin:0;
	font-size:15px;
	color:var(--lg-ink);
	background:#fff;
	border:1px solid var(--lg-line-strong);
	border-radius:var(--lg-radius-sm);
	outline:0;
	-webkit-appearance:none;
	appearance:none;
	transition:border-color .18s ease, box-shadow .18s ease;
}
html.page_m_login.page_m_login .loginBox .member_input input.text::placeholder{ color:var(--lg-ink-mute); }
html.page_m_login.page_m_login .loginBox .member_input input.text:focus{
	border-color:var(--lg-primary);
	box-shadow:0 0 0 3px var(--lg-ring);
}
/* 비밀번호칸은 버튼이 2개(보기 + 지우기)라 오른쪽 여백이 더 필요하다 */
html.page_m_login.page_m_login .loginBox .member_input input#pass{ padding-right:92px; }
/* 아이콘이 없는 입력칸(이름/주문번호/휴대폰번호)은 오른쪽 여백을 줄인다 */
html.page_m_login.page_m_login .loginBox .member_input input._onName,
html.page_m_login.page_m_login .loginBox .member_input input._onOrderNum,
html.page_m_login.page_m_login .loginBox .member_input input._onPhoneNum{ padding-right:14px; }

/* 입력칸 안 버튼(지우기 / 비밀번호 보기)
   ※ commontotal.css 가 `.pageContainer .containerInner .loginBox .member_input .inputBox .btnDel`
      (클래스 6개)로 16x16 스프라이트를 박아 두므로, 조상 클래스를 같이 붙여 특이도를 넘긴다. */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .btnDel,
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .eye{
	position:absolute;
	top:50%;
	width:40px;
	height:40px;
	margin-top:-20px;
	/* 전역 스킨이 .eye 에 translateY(-50%) 를 걸어 둬서 margin-top 과 겹치면 20px 위로 뜬다 */
	transform:none;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:none;
	border:0;
	border-radius:50%;
	cursor:pointer;
	color:var(--lg-ink-mute);
	transition:color .15s ease, background-color .15s ease;
	-webkit-tap-highlight-color:transparent;
}
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .btnDel{ right:6px; }
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .eye{ right:44px; }
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .btnDel:active,
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .eye:active{
	background:var(--lg-bg);
	color:var(--lg-ink-sub);
}
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .eye._on{ color:var(--lg-primary); }
html.page_m_login .mlg-ico{ width:20px; height:20px; display:block; pointer-events:none; }
/* 우리가 직접 "비밀번호 보기" 버튼을 그리므로 브라우저(엣지/사파리) 기본 눈 아이콘은 끈다 */
html.page_m_login input[type="password"]::-ms-reveal,
html.page_m_login input[type="password"]::-ms-clear{ display:none; width:0; height:0; }
html.page_m_login input::-webkit-credentials-auto-fill-button,
html.page_m_login input::-webkit-strong-password-auto-fill-button{ display:none !important; visibility:hidden; }
html.page_m_login .eye .mlg-ico-off{ display:none; }
html.page_m_login .eye._on .mlg-ico-on{ display:none; }
html.page_m_login .eye._on .mlg-ico-off{ display:block; }
/* 값이 없을 때는 지우기 버튼을 숨기고, 비밀번호 보기 버튼을 끝으로 당긴다 */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox .btnDel.mlg-hide{ opacity:0; visibility:hidden; }
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .member_input .inputBox.mlg-empty .eye{ right:6px; }
html.page_m_login.page_m_login .loginBox .member_input .inputBox.mlg-empty input#pass{ padding-right:52px; }

/* ============================================================
   3. 안내 / 오류 메시지
   ============================================================ */
html.page_m_login.page_m_login .loginBox .mlg-msg{
	display:flex;
	align-items:flex-start;
	gap:6px;
	margin:-4px 0 14px;
	padding:10px 12px;
	font-size:13px;
	line-height:1.45;
	color:var(--lg-danger);
	background:var(--lg-danger-bg);
	border:1px solid rgba(217,58,43,.18);
	border-radius:10px;
	letter-spacing:-.01em;
}
html.page_m_login .mlg-msg .mlg-ico{ width:16px; height:16px; margin-top:1px; flex:0 0 16px; }

/* ============================================================
   4. 로그인 상태 유지 체크박스
   ============================================================ */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .chkBox{
	display:flex;
	align-items:center;
	gap:8px;
	margin:2px 0 18px;
	padding:0;
	min-height:24px;
}
html.page_m_login.page_m_login .loginBox .chkBox .check_text{
	position:relative;
	flex:0 0 20px;
	width:20px;
	height:20px;
	margin:0;
	padding:0;
	background:#fff;
	border:1px solid var(--lg-line-strong);
	border-radius:6px;
	cursor:pointer;
	transition:background-color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color:transparent;
}
/* 전역 스킨이 ::before 로 그려두는 옛 체크 획(회전한 2x8 막대)을 끈다 */
html.page_m_login.page_m_login .loginBox .chkBox .check_text::before{ display:none; content:none; }
html.page_m_login.page_m_login .loginBox .chkBox .check_text::after{
	content:"";
	position:absolute;
	left:6px; top:2px;
	width:5px; height:10px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
	opacity:0;
	transition:opacity .12s ease;
}
html.page_m_login.page_m_login .loginBox .chkBox .check_text._on{
	background:var(--lg-primary);
	border-color:var(--lg-primary);
}
html.page_m_login.page_m_login .loginBox .chkBox .check_text._on::after{ opacity:1; }
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .chkBox .st1{
	display:block;
	font-size:14px;
	font-weight:400;
	line-height:20px;
	color:var(--lg-ink-sub);
	cursor:pointer;
	letter-spacing:-.01em;
	-webkit-tap-highlight-color:transparent;
}

/* ============================================================
   5. 버튼 — 라운딩 + 음영 + 트랜지션
   ============================================================ */
html.page_m_login.page_m_login .loginBox .naver_btn{ margin:0; }
html.page_m_login.page_m_login .loginBox .naver_btn + .naver_btn{ margin-top:10px; }

html.page_m_login.page_m_login .loginBox .naver_btn .btnStyle6,
html.page_m_login.page_m_login .loginBox .naver_btn .btn_style1{
	display:block;
	width:100%;
	height:54px;
	line-height:54px;
	padding:0;
	font-size:16px;
	font-weight:600;
	letter-spacing:-.02em;
	color:#fff;
	/* ★버튼은 항상 몰 메인컬러로 둔다.
	   비활성처럼 흐리게 만들면 브라우저 자동완성으로 채워진 경우(값이 스크립트에
	   보이지 않는다) "눌리지 않는 버튼"으로 보인다. 강조는 음영으로만 준다. */
	background:var(--lg-primary) !important;
	border:0;
	border-radius:var(--lg-radius-sm);
	box-shadow:var(--lg-shadow-btn);
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
	transition:background-color .18s ease, box-shadow .18s ease, transform .08s ease;
	-webkit-tap-highlight-color:transparent;
}
/* 아이디·비밀번호가 모두 입력되면 음영을 조금 더 깊게 (색은 그대로) */
html.page_m_login.page_m_login .loginBox .naver_btn .btnStyle6._on{
	box-shadow:var(--lg-shadow-btn-on);
}
html.page_m_login.page_m_login .loginBox .naver_btn .btnStyle6:active,
html.page_m_login.page_m_login .loginBox .naver_btn .btn_style1:active{
	transform:translateY(1px);
	box-shadow:0 1px 2px rgba(16,24,40,.10);
}

/* 비회원 주문 = 아웃라인 버튼 */
html.page_m_login.page_m_login .loginBox .naver_btn .btn_style1,
html.page_m_login.page_m_login .loginBox .naver_btn .btnNonMember{
	color:var(--lg-primary);
	background:#fff !important;
	border:1px solid var(--lg-line-strong);
	box-shadow:none;
}
html.page_m_login.page_m_login .loginBox .naver_btn .btn_style1:active,
html.page_m_login.page_m_login .loginBox .naver_btn .btnNonMember:active{
	background:var(--lg-bg);
}

/* 비회원 주문확인 입력 묶음 제목 */
html.page_m_login .mlg-sub-title{
	margin:0 0 12px;
	font-size:15px;
	font-weight:600;
	color:var(--lg-ink);
	letter-spacing:-.02em;
}
html.page_m_login.page_m_login .loginBox .member_input.mt30{ margin-top:0; }

/* ============================================================
   6. 아이디찾기 / 비밀번호찾기 / 회원가입
   ============================================================ */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .login_smenu{
	margin:0 0 12px;
	padding:6px 0;
	background:var(--lg-card);
	border:1px solid var(--lg-line);
	border-radius:var(--lg-radius);
}
html.page_m_login.page_m_login .loginBox .login_smenu ul{
	display:flex;
	align-items:stretch;
	margin:0;
	padding:0;
	list-style:none;
}
html.page_m_login.page_m_login .loginBox .login_smenu ul li{
	flex:1 1 0;
	margin:0;
	padding:0;
	list-style:none;
	background:none;
	position:relative;
}
html.page_m_login.page_m_login .loginBox .login_smenu ul li + li::before{
	content:"";
	position:absolute;
	left:0; top:50%;
	width:1px; height:24px;
	margin-top:-12px;
	background:var(--lg-line);
}
html.page_m_login.page_m_login .loginBox .login_smenu ul li a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:12px 4px;
	font-size:13px;
	font-weight:500;
	line-height:1.2;
	color:var(--lg-ink-sub);
	text-decoration:none;
	letter-spacing:-.02em;
	-webkit-tap-highlight-color:transparent;
	transition:color .15s ease;
}
html.page_m_login.page_m_login .loginBox .login_smenu ul li a:active{ color:var(--lg-primary); }
html.page_m_login.page_m_login .loginBox .login_smenu ul li a span.img{
	display:flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	margin:0;
	color:var(--lg-ink-mute);
}
html.page_m_login.page_m_login .loginBox .login_smenu ul li a span.img .mlg-ico{ width:22px; height:22px; }

/* ============================================================
   7. SNS 로그인
   ============================================================ */
html.page_m_login.page_m_login .pageContainer .containerInner .loginBox .login_gray_box{
	margin:0 0 12px;
	padding:18px 16px 20px;
	background:var(--lg-card);
	border:1px solid var(--lg-line);
	border-radius:var(--lg-radius);
}
html.page_m_login.page_m_login .loginBox .login_gray_box .tit{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 14px;
	padding:0;
	background:none;
	border:0;
}
html.page_m_login.page_m_login .loginBox .login_gray_box .tit .line{
	flex:1 1 auto;
	height:1px;
	background:var(--lg-line);
	font-size:0;
}
html.page_m_login.page_m_login .loginBox .login_gray_box .tit .centerText{
	flex:0 0 auto;
	font-size:12px;
	font-weight:500;
	color:var(--lg-ink-mute);
	letter-spacing:-.01em;
}
html.page_m_login.page_m_login .loginBox .login_gray_box .login-w{
	margin:0 0 8px;
	border-radius:var(--lg-radius-sm);
	overflow:hidden;
}
html.page_m_login.page_m_login .loginBox .login_gray_box .login-w:last-child{ margin-bottom:0; }
html.page_m_login.page_m_login .loginBox .login_gray_box .login-w a{
	display:block;
	height:48px;
	line-height:48px;
	border-radius:var(--lg-radius-sm);
	font-size:14px;
	font-weight:500;
	letter-spacing:-.02em;
	transition:filter .15s ease, transform .08s ease;
}
html.page_m_login.page_m_login .loginBox .login_gray_box .login-w a:active{ transform:translateY(1px); filter:brightness(.96); }
html.page_m_login.page_m_login .loginBox .login_gray_box #apple-w{
	margin-top:0;
	border-radius:var(--lg-radius-sm);
}

/* ============================================================
   8. 비회원 약관 레이어 (isOrder 일 때만 출력)
   ============================================================ */
html.page_m_login.page_m_login .nonmember_pop{
	border-radius:var(--lg-radius);
	border:1px solid var(--lg-line);
	box-shadow:0 12px 40px rgba(16,24,40,.18);
}
html.page_m_login.page_m_login .nonmember_pop .btn01{
	display:block;
	width:100%;
	box-sizing:border-box;
	margin:0 0 8px;
	padding:14px 12px;
	font-size:15px;
	font-weight:600;
	color:#fff;
	background:var(--lg-primary);
	border:0;
	border-radius:var(--lg-radius-sm);
	box-shadow:var(--lg-shadow-btn);
	cursor:pointer;
	transition:transform .08s ease, box-shadow .18s ease;
}
html.page_m_login.page_m_login .nonmember_pop .btn01:last-child{
	color:var(--lg-ink-sub);
	background:#fff;
	border:1px solid var(--lg-line-strong);
	box-shadow:none;
	margin-bottom:0;
}
html.page_m_login.page_m_login .nonmember_pop .btn01:active{ transform:translateY(1px); }
html.page_m_login.page_m_login .nonmember_pop .input_wrap label{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin:0 10px;
	font-size:14px;
	color:var(--lg-ink-sub);
	cursor:pointer;
}
/* 전역 common.css 가 라디오를 화면 밖(left:-9999px)으로 던지는 몰이 있어 되살린다 */
html.page_m_login.page_m_login .nonmember_pop .input_wrap label input[type="radio"]{
	position:static;
	left:auto;
	width:18px;
	height:18px;
	margin:0;
	opacity:1;
}

/* ============================================================
   9. 큰 화면(PC 에서 모바일 버전 열람) 보정
   ============================================================ */
@media (min-width:930px){
	html.page_m_login.page_m_login #content.pageContainer{ min-height:0; }
}