/* BASIC css start */
/* ============================================
   로그인 / 찾기 페이지 - 신규 디자인 (PC)
   ============================================ */

/* 기존 loginWrap 레이아웃 초기화 */
#loginWrap { width: 100%; }
#loginWrap .mlog-sign,
#loginWrap .mlog,
#loginWrap .sign,
#loginWrap .nmlog-sign,
#loginWrap .nmlog,
#loginWrap .dsc,
#loginWrap .frm-list { all: unset; display: block; }

/* 기존 find_idpw 레이아웃 초기화 */
.find_idpw { all: unset; display: block; }
.find_idpw table,
.find_idpw .find-info,
.find_idpw .btn-area,
.find_idpw .ipin-confirm { all: unset; display: block; }

/* ============================================
   래퍼 (로그인 / 찾기 공통)
   ============================================ */
.login-wrapper,
.find-wrapper {
    padding: 60px 20px;
}
.login-wrap,
.find-wrap {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* ============================================
   타이틀
   ============================================ */
.login-wrap .page-title-wrap {
    text-align: left;
}
.login-wrap .page-title-wrap h2 {
    line-height: 1.35;
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0;
}
.login-wrap .page-title-wrap p {
    padding-top: 8px;
    font-size: 14px;
    color: #666;
    margin: 0;
}
/* 찾기 페이지는 중앙정렬 타이틀 */
.find-wrap .page-title-wrap {
    text-align: center;
    margin-bottom: 30px;
}
.find-wrap .page-title-wrap h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   입력폼 (공통)
   ============================================ */
.login-wrap .login-form fieldset { border: 0; padding: 0; margin: 0; }
.login-wrap .login-form legend.blind,
.login-wrap .blind,
.find-wrap .blind {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}
.login-wrap .form-textfield,
.find-wrap .form-textfield {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
}
.login-wrap .form-textfield input,
.login-wrap .form-textfield .MS_login_id,
.login-wrap .form-textfield .MS_login_pw,
.find-wrap .form-textfield input,
.find-wrap .form-textfield .MS_input_txt {
    width: 100% !important;
    height: 48px !important;
    line-height: 48px;
    padding: 0 14px;
    border: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
}
.login-wrap .form-textfield input:focus,
.find-wrap .form-textfield input:focus {
    border-color: #111;
    outline: none;
}


/* placeholder 스타일 통일 (찾기 페이지) */
.find-wrap .form-textfield input::placeholder {
    color: #aaa;
    font-size: 14px;
    opacity: 1;
}
.find-wrap .form-textfield input:-ms-input-placeholder {
    color: #aaa;
}
.find-wrap .form-textfield input::-ms-input-placeholder {
    color: #aaa;
}

/* 메이크샵 기본 size 속성 무력화 */
.find-wrap .form-textfield input[size] {
    width: 100% !important;
}



/* 입력 필드 라벨 + 도움말 (찾기 페이지) */
.find-wrap .field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.find-wrap .field-label {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
}
.find-wrap .field-help {
    margin: 4px 0 0;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

/* ============================================
   체크박스 / 라디오 (공통)
   ============================================ */
.login-wrap .form-check,
.find-wrap .form-check {
    display: inline-flex;
    align-items: center;
    margin-right: 16px;
}
.login-wrap .form-check .form-check-label,
.find-wrap .form-check .form-check-label {
    font-size: 14px;
    white-space: nowrap;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.login-wrap .form-check input[type="checkbox"],
.login-wrap .form-check input[type="radio"],
.find-wrap .form-check input[type="checkbox"],
.find-wrap .form-check input[type="radio"] {
    width: 16px; height: 16px;
    margin: 0;
    vertical-align: middle;
}
.login-wrap .form-check {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 14px;
}

/* ============================================
   버튼 (공통)
   ============================================ */
.login-wrap .btn-login,
.find-wrap .btn-find {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0 16px;
}
.login-wrap .btn-login .btn,
.find-wrap .btn-find .btn {
    display: block;
    width: 100%;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}
.login-wrap .btn-login .btn-primary,
.find-wrap .btn-find .btn-primary {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}
.login-wrap .btn-login .btn-primary:hover,
.find-wrap .btn-find .btn-primary:hover {
    background: #000;
}
.login-wrap .btn-login .btn-outline,
.find-wrap .btn-find .btn-outline,
.find-wrap .btn-find .btn-white {
    background: #fff;
    color: #111;
    border: 1px solid #111;
}
.login-wrap .btn-login .btn-outline:hover,
.find-wrap .btn-find .btn-outline:hover,
.find-wrap .btn-find .btn-white:hover {
    background: #f5f5f5;
}

/* ============================================
   하단 링크 (회원가입 / ID·PW 찾기)
   ============================================ */
.login-wrap .btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrap .btn-link a {
    position: relative;
    color: #333;
    padding: 0 20px;
    font-size: 14px;
    text-decoration: none;
}
.login-wrap .btn-link a:not(:last-child)::after {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px; height: 12px;
    background: #ddd;
    content: '';
}

/* ============================================
   비회원 주문조회 영역
   ============================================ */
.login-wrap .guest-order-wrap {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.login-wrap .guest-order-head {
    text-align: left;
    margin-bottom: 4px;
}
.login-wrap .guest-order-head .guest-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.4;
}
.login-wrap .guest-order-head .guest-desc {
    padding-top: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   탭 (찾기 페이지)
   ============================================ */
.find-wrap .cw-tab {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
}
.find-wrap .cw-tab li {
    flex: 1;
    text-align: center;
    margin: 0;
}
.find-wrap .cw-tab li a {
    display: block;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 500;
    color: #999;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}
.find-wrap .cw-tab li.now a {
    color: #111;
    font-weight: 700;
    border-bottom-color: #111;
}

/* 탭 컨텐츠 */
.find-wrap .tab-content { display: none; }
.find-wrap .tab-content.active { display: block; }

/* 안내 문구 */
.find-wrap .txt-method {
    padding-top: 24px;
    color: #555;
    font-size: 14px;
    margin: 0 0 12px;
}

/* 라디오 묶음 */
.find-wrap .radio-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 4px;
    margin: 0;
}
.find-wrap .radio-wrap label {
    margin: 0;
    font-weight: normal;
    color: #333;
}

/* ============================================
   라디오 버튼 흑백 커스텀
   ============================================ */
.find-wrap .radio-wrap .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

/* 기본 라디오 숨김 후 커스텀 원형으로 대체 */
.find-wrap .radio-wrap input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #bbb;
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
    transition: all 0.15s;
}

/* 선택된 라디오 - 검정 테두리 + 검정 점 */
.find-wrap .radio-wrap input[type="radio"]:checked {
    border-color: #111;
}
.find-wrap .radio-wrap input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #111;
}

/* 호버 효과 */
.find-wrap .radio-wrap input[type="radio"]:hover {
    border-color: #666;
}


/* ============================================
   본인인증 영역 (찾기 페이지)
   ============================================ */
.find-wrap .auth-wrap {
    margin: 24px 0 0;
    padding: 32px 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.find-wrap .auth-wrap .txt-wrap {
    font-size: 14px;
    text-align: center;
}
.find-wrap .auth-wrap .txt-wrap strong {
    display: block;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
}
.find-wrap .auth-wrap .txt-wrap p {
    color: #666;
    margin: 0;
    line-height: 1.5;
}
.find-wrap .auth-wrap .btn-auth {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    text-align: center;
}
.find-wrap .auth-wrap .btn-auth a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    background: #fff;
    transition: all 0.2s;
}
.find-wrap .auth-wrap .btn-auth a:hover {
    border-color: #111;
}
.find-wrap .auth-wrap .btn-auth span {
    display: inline-block;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 6px;
}
.find-wrap .auth-wrap .btn-auth span img {
    max-width: 36px;
    height: auto;
}
.find-wrap .auth-wrap .btn-auth p {
    color: #333;
    font-size: 13px;
    margin: 0;
}

/* ============================================
   SNS 로그인
   ============================================ */
.sns-wrap { padding-top: 50px; }
.sns-wrap .sns-title {
    position: relative;
    color: #888;
    font-size: 14px;
    text-align: center;
    margin: 0;
}
.sns-wrap .sns-title::before {
    display: block;
    height: 1px;
    background: #e5e5e5;
    content: '';
}
.sns-wrap .sns-title span {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 14px;
    background: #fff;
}
.sns-wrap .sns-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 36px 0 0;
    list-style: none;
    margin: 0;
}
.sns-wrap .sns-btns li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.sns-wrap .sns-btns li a {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.sns-wrap .sns-btns li a.kakaotalk {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_kakao.svg');
    background-color: #fee500;
}
.sns-wrap .sns-btns li a.naver {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_naver.svg');
    background-color: #03cf5d;
}
.sns-wrap .sns-btns li a.facebook {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_facebook.svg');
    background-color: #1877f2;
}
.sns-wrap .sns-btns li a.apple {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_apple.svg');
    background-color: #121212;
}
.sns-wrap .sns-btns span {
    display: inline-block;
    width: 80px;
    height: 24px;
    font-size: 12px;
    color: #888;
    text-indent: 0;
}
/* BASIC css end */