@charset "utf-8";
/* ==========================================================================
   남자닷컴 - 로그인 페이지 스타일 / 화이트·블랙
   style.css 다음에 로드되어 로그인 관련 스타일만 덮어씁니다.
   (다른 회원 페이지 스타일은 건드리지 않습니다)
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");

#mb_login {
    --lg-accent:      #111111;
    --lg-accent-dark: #000000;
    --lg-ink:         #111111;
    --lg-sub:         #5e5e5e;
    --lg-muted:       #9a9a9a;
    --lg-line:        #e4e4e4;
    --lg-line-soft:   #eeeeee;
    --lg-field:       #fafafa;
    --lg-radius:      14px;
}

/* ── 기존 style.css 초기화 ────────────────────────────────── */
#mb_login.mbskin {
    position: relative;
    /* 화면 세로 가운데 정렬.
       헤더/푸터를 붙여 쓰는 경우에는 아래 min-height 를
       calc(100vh - 헤더높이 - 푸터높이) 로 바꾸거나 지우세요. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 40px 16px;
    text-align: left;
    background: linear-gradient(180deg, #f7f7f7 0%, #fafafa 55%, #fff 100%);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                 "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: var(--lg-ink);
    -webkit-font-smoothing: antialiased;
}
#mb_login.mbskin:after { display: none; }
#mb_login .mbskin_box {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04),
                0 12px 32px -18px rgba(0, 0, 0, .18);
    overflow: hidden;
}
#mb_login h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 브랜드 ───────────────────────────────────────────────── */
#mb_login .lg_brand {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 420px;
    min-height: 40px;
    margin: 0 auto 22px;
    text-align: center;
}
#mb_login .lg_brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 40px;
}
#mb_login .lg_brand .lg_brand_tx {
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.045em;
    color: var(--lg-ink);
}

/* ── 탭 (로그인 / 회원가입) ───────────────────────────────── */
#mb_login .mb_log_cate {
    display: flex;
    border-bottom: 1px solid var(--lg-line-soft);
}
#mb_login .mb_log_cate:after { display: none; }
#mb_login .mb_log_cate h2,
#mb_login .mb_log_cate .join {
    float: none;
    flex: 1 1 50%;
    width: auto;
    position: relative;
    padding: 20px 0 18px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.03em;
    background: none;
    transition: color .15s ease;
}
#mb_login .mb_log_cate h2 { color: var(--lg-ink); }
#mb_login .mb_log_cate h2:after {
    content: "";
    position: absolute;
    left: 24px; right: 24px; bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--lg-accent);
}
#mb_login .mb_log_cate .join { color: var(--lg-muted); font-weight: 600; }
#mb_login .mb_log_cate .join:hover { color: var(--lg-ink); }

/* ── 폼 ───────────────────────────────────────────────────── */
#mb_login #login_fs {
    padding: 28px 28px 26px;
    border: 0;
    margin: 0;
}
#mb_login #login_fs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#mb_login .lg_field { position: relative; margin: 0 0 10px; }

#mb_login .lg_input,
#mb_login #login_fs .frm_input {
    display: block;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    background: var(--lg-field);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--lg-ink);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#mb_login .lg_input::placeholder { color: var(--lg-muted); font-weight: 400; }
#mb_login .lg_input:hover { border-color: #cfcfcf; }
#mb_login .lg_input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--lg-accent);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .10);
}
#mb_login .lg_field.has_toggle .lg_input { padding-right: 52px; }

/* 비밀번호 표시 토글 */
#mb_login .lg_toggle {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--lg-muted);
    cursor: pointer;
    padding: 0;
}
#mb_login .lg_toggle:hover { color: var(--lg-sub); background: rgba(0, 0, 0, .05); }
#mb_login .lg_toggle svg { width: 20px; height: 20px; display: block; }
#mb_login .lg_toggle .ic_off { display: none; }
#mb_login .lg_toggle[aria-pressed="true"] .ic_on  { display: none; }
#mb_login .lg_toggle[aria-pressed="true"] .ic_off { display: block; }

/* ── 로그인 버튼 ──────────────────────────────────────────── */
#mb_login #login_fs .btn_submit {
    display: block;
    width: 100%;
    height: 54px;
    margin: 16px 0 0;
    border: 0;
    border-radius: 10px;
    background: var(--lg-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.03em;
    cursor: pointer;
    transition: background .15s ease, transform .06s ease;
}
#mb_login #login_fs .btn_submit:hover { background: var(--lg-accent-dark); }
#mb_login #login_fs .btn_submit:active { transform: translateY(1px); }

/* ── 자동로그인 / 계정찾기 ────────────────────────────────── */
#mb_login #login_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 0;
    font-size: 14px;
}
#mb_login #login_info:after { display: none; }
#mb_login #login_info .login_if_auto,
#mb_login #login_info .login_if_lpl { float: none; }

#mb_login .lg_check { position: relative; }
#mb_login .lg_check input {
    position: absolute; top: 0; left: 0;
    width: 1px; height: 1px; opacity: 0; z-index: -1;
}
#mb_login .lg_check label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: var(--lg-sub);
    font-weight: 500;
    letter-spacing: -.02em;
    cursor: pointer;
    vertical-align: baseline;
}
#mb_login .lg_check label span {
    float: none;
    flex: none;
    width: 18px; height: 18px;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    background: #fff;
    transition: background .15s ease, border-color .15s ease;
}
#mb_login .lg_check input:checked + label { color: var(--lg-ink); }
#mb_login .lg_check input:checked + label span {
    border-color: var(--lg-accent);
    background: var(--lg-accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.5'/%3E%3C/svg%3E") no-repeat 50% 50%;
    background-size: 13px 13px;
}
#mb_login .lg_check input:focus-visible + label span {
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .14);
}

#mb_login .login_if_lpl a {
    color: var(--lg-sub);
    font-weight: 500;
    letter-spacing: -.02em;
    border: 0;
    padding: 0;
}
#mb_login .login_if_lpl a:hover { color: var(--lg-accent); text-decoration: underline; }

/* ── 소셜 로그인 ──────────────────────────────────────────── */
#mb_login .lg_social {
    padding: 22px 28px 26px;
    border-top: 1px solid var(--lg-line-soft);
    background: #fafafa;
}
#mb_login .lg_social:empty { display: none; }
#mb_login .lg_social h3,
#mb_login .lg_social .sns-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--lg-muted);
    border: 0;
    background: none;
    padding: 0;
}
#mb_login .lg_social ul { display: flex; flex-wrap: wrap; gap: 8px; }
#mb_login .lg_social li { flex: 1 1 0; min-width: 140px; list-style: none; }
#mb_login .lg_social a { border-radius: 10px !important; }

/* ── 비회원 구매 / 주문조회 패널 ──────────────────────────── */
#mb_login #mb_login_notmb,
#mb_login #mb_login_od_wr {
    width: 100%;
    max-width: 420px;
    margin: 16px auto 0;
    padding: 26px 28px 28px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
#mb_login #mb_login_notmb h2,
#mb_login #mb_login_od_wr h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--lg-ink);
}
#mb_login #mb_login_notmb > p,
#mb_login #mb_login_odinfo p {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lg-sub);
}
#mb_login #guest_privacy {
    height: 140px;
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    background: var(--lg-field);
    font-size: 13px;
    line-height: 1.7;
    color: var(--lg-sub);
    overflow-y: auto;
}
#mb_login #mb_login_notmb .lg_check label { font-size: 14px; line-height: 1.5; align-items: flex-start; }
#mb_login #mb_login_notmb .lg_check label span { margin-top: 2px; }
#mb_login #mb_login_notmb .btn_confirm { margin: 18px 0 0; }
#mb_login #mb_login_notmb .btn_submit,
#mb_login #mb_login_od_wr .btn_submit {
    display: block;
    width: 100%;
    height: 52px;
    line-height: 52px;
    margin: 14px 0 0;
    border: 0;
    border-radius: 10px;
    background: var(--lg-ink);
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.03em;
    cursor: pointer;
}
#mb_login #mb_login_notmb .btn_submit:hover,
#mb_login #mb_login_od_wr .btn_submit:hover { background: #000; }
#mb_login #mb_login_od { padding: 0; border: 0; margin: 0; }
#mb_login #mb_login_od legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#mb_login #mb_login_od_wr .frm_input { margin: 0 0 10px; }
#mb_login #mb_login_odinfo { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--lg-field); }
#mb_login #mb_login_odinfo strong { color: var(--lg-ink); }

/* ── 모바일 ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    #mb_login.mbskin { padding: 28px 14px; }
    #mb_login .lg_brand { min-height: 34px; margin-bottom: 18px; }
    #mb_login .lg_brand img { max-height: 34px; max-width: 180px; }
    #mb_login .lg_brand .lg_brand_tx { font-size: 18px; }
    #mb_login #login_fs { padding: 22px 20px 22px; }
    #mb_login .lg_social { padding: 20px; }
    #mb_login .lg_social li { min-width: 100%; }
    #mb_login #mb_login_notmb,
    #mb_login #mb_login_od_wr { padding: 22px 20px 24px; }
}

/* ── 접근성 ───────────────────────────────────────────────── */
#mb_login a:focus-visible,
#mb_login button:focus-visible {
    outline: 2px solid var(--lg-accent);
    outline-offset: 2px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    #mb_login * { transition: none !important; }
}

/* ── 헤더/푸터(head.php · tail.php) 적용 시 ────────────────
   테마가 출력하는 페이지 타이틀("로그인")이 카드 위에 한 번 더
   찍히는 걸 막고, 컨테이너 여백을 로그인 섹션이 직접 잡도록 함.
   테마 타이틀을 그대로 쓰고 싶으면 이 블록만 지우면 됩니다.        */
#container:has(#mb_login) #container_title,
#wrapper:has(#mb_login) #container_title,
body:has(#mb_login) #wrapper_title,
body:has(#mb_login) .wrapper_title { display: none; }
#container:has(#mb_login) {
    padding: 0;
    border: 0;
    background: none;
}


/* ── sound_only 보호 ──────────────────────────────────────────
   스크린리더 전용 요소가 화면에 노출/겹치지 않도록 고정합니다. */
#mb_login .sound_only,
#mb_login label.sound_only,
#mb_login b.sound_only,
#mb_login span.sound_only,
#mb_login strong.sound_only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}