/* BASIC css start */
/* --- 모바일 로그인 페이지 (최종 수정) --- */

/* 기본 폰트 및 배경 설정 */
body, html {
    font-family: 'Malgun Gothic', sans-serif;
    background-color: #fdfaf6;
}

/* 컨테이너 및 기본 여백 */
#container { padding-bottom: 50px; }
#contents { padding: 0 15px; }
main.login { max-width: 500px; margin: 0 auto; }

/* 페이지 제목 */
.login .h_title {
    text-align: center; padding: 30px 0;
    border-bottom: 1px solid #e0d5c6; margin-bottom: 20px;
}
.login .h_title h3 { font-size: 22px; font-weight: bold; color: #4a3f35; }

/* --- 회원 로그인 섹션 --- */
.login section.member {
    background-color: #fff; padding: 25px 20px;
    border: 1px solid #e0d5c6; border-radius: 12px;
    margin-bottom: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 아이디/비밀번호 입력창 */
.login .loginInput { margin-bottom: 10px; }
.login .loginInput input[type="text"],
.login .loginInput input[type="password"] {
    width: 100%; height: 48px; padding: 0 15px; font-size: 15px;
    border: 1px solid #e0d5c6; border-radius: 8px; box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login .loginInput input[type="text"]:focus,
.login .loginInput input[type="password"]:focus {
    border-color: #b59d7f; box-shadow: 0 0 5px rgba(181, 157, 127, 0.3); outline: none;
}
.login .loginInput input::placeholder { color: #aaa; opacity: 1; }
.login .loginInput input::-webkit-input-placeholder { color: #aaa; }
.login .loginInput input::-moz-placeholder { color: #aaa; opacity: 1; }
.login .loginInput input:-ms-input-placeholder { color: #aaa; }

/* ▼▼▼ 문제 1 수정 ▼▼▼ */
/* 아이디저장/자동로그인 체크박스 */
.login .loginCheck {
    margin-top: 15px; margin-bottom: 20px; display: flex;
    justify-content: space-between; /* ★ 양쪽 끝으로 벌리기 */
    flex-wrap: nowrap; /* ★ 줄바꿈 방지 */
    gap: 5px; /* 최소 간격 */
}
.login .loginCheck .check-box {
    display: flex; align-items: center; cursor: pointer;
    white-space: nowrap; /* ★ 텍스트 줄바꿈 방지 */
}
/* ▲▲▲ 문제 1 수정 끝 ▲▲▲ */
.login .loginCheck .check-box input[type="checkbox"] { margin-right: 5px; }
.login .loginCheck .check-box .text { font-size: 13px; color: #555; }

/* 로그인 / 아이디찾기 버튼 */
.login .btn_bottom_box .btn_full100 {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 50px; font-size: 16px; font-weight: bold;
    text-align: center; border-radius: 8px; margin-bottom: 10px;
    transition: all 0.3s ease; text-decoration: none;
}
.login .btn_bottom_box .btn_basic_1 { background-color: #4a3f35; border: 1px solid #4a3f35; color: #fff; }
.login .btn_bottom_box .btn_basic_1:hover { background-color: #b59d7f; border-color: #b59d7f; }
.login .btn_bottom_box .btn_basic_4 { background-color: #fff; border: 1px solid #e0d5c6; color: #4a3f35; }
.login .btn_bottom_box .btn_basic_4:hover { background-color: #fdfaf6; border-color: #b59d7f; }

/* --- SNS 간편 로그인 --- */
.login section.sns_login { margin-bottom: 30px; text-align: center; }
.login .sns_login .sns_title {
    font-size: 14px; color: #888; margin-bottom: 20px; /* 간격 살짝 증가 */
    position: relative; overflow: hidden; text-align: center;
}
.login .sns_login .sns_title b {
    font-weight: bold; color: #555; position: relative; z-index: 1;
    /* ▼▼▼ 문제 2 수정 ▼▼▼ */
    background-color: #fdfaf6; /* ★ 배경색 추가해서 선 가리기 */
    padding: 0 10px; /* ★ 좌우 여백 추가해서 선 밀어내기 */
    /* ▲▲▲ 문제 2 수정 끝 ▲▲▲ */
}
.login .sns_login .sns_title:before,
.login .sns_login .sns_title:after {
    content: ""; position: absolute; top: 50%; width: 50%; /* 너비 조정 */
    height: 1px; background-color: #e0e0e0;
}
.login .sns_login .sns_title:before { left: 0; margin-left: -50%; /* 중앙 기준 왼쪽 정렬 */ }
.login .sns_login .sns_title:after { right: 0; margin-right: -50%; /* 중앙 기준 오른쪽 정렬 */ }

.login .sns_login ul {
    list-style: none; padding: 0; margin: 0 auto; /* ★ 중앙 정렬 */
    display: flex; flex-direction: column; gap: 10px;
    max-width: 320px; /* ★ 버튼 최대 너비 지정 (선택 사항) */
}
/* ▼▼▼ SNS li, a 스타일 (아이콘 absolute + 텍스트 완벽 중앙) ▼▼▼ */
.login .sns_login li {
    /* li는 배경색(HTML inline style), 테두리, 둥근 모서리 담당 */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.1); 
    display: block;
    position: relative; /* ★ a 태그 위치 기준점 */
}
.login .sns_login li:last-child { margin-bottom: 0; }

.login .sns_login li a {
    display: flex; /* flex 유지 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* ★ 가로 중앙 정렬 (이제 텍스트만 해당) ★ */
    height: 48px;
    font-size: 15px; font-weight: bold;
    text-decoration: none;
    position: relative; /* ★ ::before 위치 기준점 */
    box-sizing: border-box;
    color: #333; /* 기본 글자색 */
    padding: 0 15px; /* 기본 좌우 여백 */
    /* 배경/테두리 제거 */
    background: none !important; 
    border: none;
    border-radius: 0;
    /* ★ 아이콘 관련 background 속성 제거 ★ */
    /* background-image, background-size, background-repeat, background-position 제거 */
}

/* ★ 가상요소 ::before로 아이콘 추가 (absolute 사용) ★ */
.login .sns_login li a::before {
    content: '';
    position: absolute; /* ★ 레이아웃 흐름에서 제외하여 텍스트 위치에 영향을 주지 않음 ★ */
    /* ★ 위치 조정: 글씨 왼쪽에 오도록 left 값 계산 (필요시 조절) */
    /* 예: 버튼 중앙 기준으로 아이콘 너비/2 + 글씨와의 간격 만큼 왼쪽으로 이동 */
    left: calc(40% - 10px - 40px); /* 50% - 아이콘너비/2 - 간격 */
    top: 50%; 
    transform: translateY(-50%); 
    width: 20px; /* 아이콘 크기 */
    height: 20px; /* 아이콘 크기 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* ▲▲▲ SNS li, a 스타일 수정 끝 ▲▲▲ */



/* 실제 아이콘 경로 필요 */
.login .sns_login li a.naver { color: #fff; background-image: url('/design/daehangold/naver_icon.png'); }
.login .sns_login li a.kakaotalk { color: #3C1E1E; background-image: url('/design/daehangold/kakao_icon.png'); }
.login .sns_login li a.apple { color: #000; background-image: url('/design/daehangold/apple_icon.png'); }
.login .sns_login li a.facebook { color: white; background-image: url('/design/daehangold/facebook_icon.png');}

/* --- 비회원 가입 안내 --- */
.login section.guest_notice {
    background-color: #fff; padding: 25px 20px;
    border: 1px solid #e0d5c6; border-radius: 12px; text-align: center;
}
.login .guest_notice h4 { font-size: 16px; font-weight: bold; color: #4a3f35; margin: 0 0 10px 0; }
/* ▼▼▼ 문제 3 수정 ▼▼▼ */
.login .guest_notice p {
    font-size: 13px; color: #666; margin: 0 auto 15px auto; line-height: 1.5;
    max-width: 280px; /* ★ 텍스트가 두 줄로 자연스럽게 줄바꿈되도록 최대 너비 제한 */
}
/* ▲▲▲ 문제 3 수정 끝 ▲▲▲ */
.login .guest_notice .btn_basic_1 { /* 회원가입 버튼 */
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 50px; font-size: 16px; font-weight: bold;
    text-align: center; border-radius: 8px; background-color: #b59d7f;
    border: 1px solid #b59d7f; color: #fff; transition: all 0.3s ease; text-decoration: none;
}
.login .guest_notice .btn_basic_1:hover { background-color: #4a3f35; border-color: #4a3f35; }


/* --- 비회원 구매 버튼 스타일 (아이디찾기 버튼과 동일하게) --- */
/* (선택자는 HTML 구조에 따라 더 구체적으로 지정해야 할 수 있음) */
a.btn_basic.btn_full100.btn_basic_4 { 
    display: flex; /* 내부 텍스트 정렬 */
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 50px; 
    font-size: 16px; 
    font-weight: bold;
    text-align: center; 
    border-radius: 8px; 
    margin-bottom: 10px; /* 다른 버튼들과 간격 맞춤 (필요시 조절) */
    transition: all 0.3s ease; 
    text-decoration: none;
    box-sizing: border-box;

    /* ★ 아이디찾기 버튼과 동일한 스타일 적용 ★ */
    background-color: #fff;
    border: 1px solid #e0d5c6; /* 베이지 테두리 */
    color: #4a3f35; /* 다크 브라운 텍스트 */
}

a.btn_basic.btn_full100.btn_basic_4:hover {
    background-color: #fdfaf6; /* 배경 살짝 변경 */
    border-color: #b59d7f; /* 골드 테두리 호버 */
}

/* --- 회원 아이디 입력창 배경색 강제 지정 --- */
.login section.member .loginInput input[type="text"], 
.login section.member .loginInput input:-webkit-autofill { /* 웹킷 브라우저 자동완성 */
    background-color: #ffffff !important; /* 흰색 배경 강제 적용 */
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* 자동완성 배경색 제거 트릭 */
    -webkit-text-fill-color: #333 !important; /* 자동완성 글자색 */
}

/* --- 주문/배송조회 페이지 - 비회원 가입 안내 박스 스타일 --- */

/* ★★★ div.guest_notice 에도 동일한 박스 스타일 적용 ★★★ */
main#login article.nonmember div.guest_notice { 
    background-color: #fff; 
    padding: 25px 20px;
    border: 1px solid #e0d5c6; 
    border-radius: 12px; 
    text-align: center;
    margin-top: 30px; /* 주문조회 폼과의 간격 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 통일성을 위해 그림자 추가 */
}

/* ★★★ 내부 h4, p, a 태그 스타일도 동일하게 적용 ★★★ */
main#login article.nonmember div.guest_notice h4 { 
    font-size: 16px; 
    font-weight: bold; 
    color: #4a3f35; 
    margin: 0 0 10px 0; 
}
main#login article.nonmember div.guest_notice p { 
    font-size: 13px; 
    color: #666; 
    margin: 0 auto 15px auto; 
    line-height: 1.5; 
    max-width: 280px; 
}
main#login article.nonmember div.guest_notice a.btn_basic_1 { /* 회원가입 버튼 */
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 50px; font-size: 16px; font-weight: bold;
    text-align: center; border-radius: 8px; background-color: #b59d7f; /* 골드 */
    border: 1px solid #b59d7f; color: #fff; transition: all 0.3s ease; text-decoration: none;
    margin-top: 15px; /* 문단과의 간격 */
}
main#login article.nonmember div.guest_notice a.btn_basic_1:hover { 
    background-color: #4a3f35; /* 다크 브라운 호버 */
    border-color: #4a3f35; 
}
/* BASIC css end */