/* BASIC css start */
/* ======================================================================
   인터타롯 일반 회원 로그인 페이지 CSS (시안 톤, 안전 버전)

   원본 마크업 호환. input의 line-height/pointer-events 강제 지정
   모두 제거하여 입력 차단 문제 방지.
   ====================================================================== */

/* ===== 컨테이너 ===== */
.login-wrapper {
    background: white;
    color: #2c2c2a;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
    min-height: calc(100vh - 100px);
    padding: 0 20px;
    box-sizing: border-box;
}

.login-wrap {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 60px;
    box-sizing: border-box;
}

/* ===== 인사말 ===== */
.login-wrap .page-title-wrap {
    text-align: left;
    padding-top: 32px;
}
.login-wrap .page-title-wrap h2,
.login-wrap .page-title-wrap .fix-tit {
    line-height: 1.35;
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2a;
    margin: 0;
    padding: 0;
    letter-spacing: -0.5px;
}
.login-wrap .page-title-wrap p {
    padding-top: 10px;
    margin: 0;
    font-size: 13px;
    color: #5F5E5A;
    line-height: 1.6;
}

/* ===== 입력 필드 영역 ===== */
.login-wrap .form-textfield {
    padding-top: 28px;
}

/* input 본체만 직접 타깃, wrapper나 부가 속성은 건드리지 않음 */
.login-wrap .form-textfield input[type="text"],
.login-wrap .form-textfield input[type="password"],
.login-wrap .form-textfield input[type="email"] {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    background: #faf9f6;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 14px;
    color: #2c2c2a;
    box-sizing: border-box;
    margin-bottom: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.login-wrap .form-textfield input:focus {
    outline: none;
    border-color: #593574;
    background: white;
}
.login-wrap .form-textfield input::placeholder {
    color: #888780;
}

/* 메이크샵 자체 클래스 */
.MS_login_id,
.MS_login_pw {
    height: auto;
}

/* ===== 한글 자판 토글 ===== */
.login-wrap #keyboard {
    margin-top: 6px;
    text-align: right;
}
.login-wrap #keyboard p { margin: 0; }
.login-wrap #keyboard a {
    font-size: 12px;
    color: #5F5E5A;
    text-decoration: none;
}
.login-wrap #keyboard a .fa {
    margin-left: 4px;
    color: #888780;
    font-size: 11px;
}
.login-wrap #keyboard img {
    display: none;
    width: 100%;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
}

/* ===== 체크박스 ===== */
.login-wrap .form-check {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 14px;
}
.login-wrap .form-check .form-check-label {
    font-size: 13px;
    color: #2c2c2a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1.4;
    margin: 0;
}
.login-wrap .form-check input[type="checkbox"] {
    accent-color: #593574;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* ===== 로그인 버튼 ===== */
.login-wrap .btn-login {
    padding: 28px 0 0;
}
.login-wrap .btn-login .btn,
.login-wrap .btn-login .btn-primary,
.login-wrap .btn-login .btn-lg {
    display: block;
    width: 100%;
    height: 52px;
    line-height: 52px;
    padding: 0;
    background: #593574;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

/* ===== 회원가입 / 아이디·비번 찾기 링크 ===== */
.login-wrap .btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}
.login-wrap .btn-link a {
    position: relative;
    color: #2c2c2a;
    padding: 0 20px;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.4;
}
.login-wrap .btn-link a:not(:last-child)::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(0,0,0,0.15);
    content: '';
}

/* ===== SNS 로그인 ===== */
.login-wrap .sns-wrap {
    padding-top: 56px;
}
.sns-wrap .sns-title {
    position: relative;
    color: #888780;
    font-size: 13px;
    margin: 0;
    text-align: center;
}
.sns-wrap .sns-title::before {
    display: block;
    height: 1px;
    background: rgba(0,0,0,0.08);
    content: '';
}
.sns-wrap .sns-title span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0 12px;
    background: white;
    white-space: nowrap;
}
.sns-wrap .sns-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 36px 0 0;
    list-style: none;
    margin: 0;
}
.sns-wrap .sns-btns li {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.sns-wrap .sns-btns li a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0;
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    text-decoration: none;
}

.sns-wrap .sns-btns li a.kakaotalk {
    background-color: #FEE500;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%232c2c2a' d='M11 4C6.58 4 3 6.78 3 10.21c0 2.22 1.5 4.16 3.74 5.27-.16.59-.6 2.18-.69 2.52-.11.42.16.42.33.31.13-.09 2.07-1.41 2.91-1.98.56.08 1.13.13 1.71.13 4.42 0 8-2.78 8-6.21S15.42 4 11 4z'/%3E%3C/svg%3E");
    background-size: 22px 22px;
}
.sns-wrap .sns-btns li a.naver {
    background-color: #03C75A;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23fff' d='M11.36 9.55 6.55 3H3v12h3.64V8.45L11.45 15H15V3h-3.64v6.55z'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.sns-wrap .sns-btns li a.facebook {
    background-color: #1877F2;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14 6.5h2V3h-2.5C11 3 9.5 4.5 9.5 7v2h-2v3h2v9h3v-9h2.5l.5-3h-3V7c0-.3.2-.5.5-.5z'/%3E%3C/svg%3E");
    background-size: 14px 14px;
}
.sns-wrap .sns-btns li a.apple {
    background-color: #121212;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.05 12.04c-.03-2.5 2.04-3.7 2.13-3.76-1.16-1.7-2.97-1.93-3.62-1.96-1.54-.16-3.02.91-3.8.91-.79 0-2-.89-3.29-.86-1.69.02-3.26.99-4.13 2.5-1.77 3.06-.45 7.59 1.27 10.07.84 1.21 1.84 2.58 3.16 2.53 1.27-.05 1.75-.82 3.28-.82s1.96.82 3.3.79c1.36-.02 2.22-1.24 3.05-2.46.96-1.41 1.36-2.78 1.38-2.85-.03-.01-2.65-1.02-2.68-4.02zM14.6 4.55c.7-.85 1.17-2.04 1.04-3.21-1.01.04-2.23.67-2.95 1.51-.65.75-1.21 1.95-1.06 3.11 1.13.09 2.27-.57 2.97-1.41z'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}

.sns-wrap .sns-btns span {
    display: inline-block;
    width: auto;
    min-width: 60px;
    height: auto;
    font-size: 11px;
    color: #888780;
    text-align: center;
    line-height: 1.4;
}
.sns-wrap .sns-btns span:empty {
    display: none;
}

/* ===== 비회원 주문조회 버튼 ===== */
.login-wrap .btn-guest-order {
    padding-top: 40px;
}
.login-wrap .btn-guest-order .btn,
.login-wrap .btn-guest-order .btn-outline,
.login-wrap .btn-guest-order .btn-lg {
    display: block;
    width: 100%;
    height: 52px;
    line-height: 50px;
    padding: 0;
    background: white;
    color: #2c2c2a;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

/* ===== 모바일 ===== */
@media (max-width: 767.98px) {
    .login-wrap .page-title-wrap h2,
    .login-wrap .page-title-wrap .fix-tit {
        font-size: 22px;
    }
}
/* BASIC css end */