@charset "utf-8";

/* ─────────────────────────────────────────────────────────────
   로그인 · 회원가입 — 휴대폰 인증 화면
   원본 member.css 톤(여백·서체)을 유지하면서 배열만 고르게 다듬는다.
   ───────────────────────────────────────────────────────────── */

/*
 * 원본 member.css 는 display:table 로 좌우를 나눈다.
 * 표 칸(table-cell)에는 max-width 가 듣지 않으므로 칸은 그대로 두고,
 * 안에 들어가는 내용의 폭만 하나로 맞춰 세로줄이 고르게 보이도록 한다.
 */
#mb_login .mbskin_box > h1,
#mb_login .mbskin_box > h2,
#mb_login .mbskin_box > p,
#mb_login .mbskin_box > form,
#mb_login .mbskin_box > .auth_notice,
#mb_login .mbskin_box > .auth_error,
#mb_login .mbskin_box > .dev_select {
    max-width: 460px;
    box-sizing: border-box;
}

/* 제목 묶음 — 아래 입력칸과 왼쪽 선을 맞춘다 */
#mb_login .mbskin_box h1,
#mb_login .mbskin_box h2,
#mb_login .mbskin_box > p {
    text-align: left;
}

#mb_login .mbskin_box > p {
    margin: 0 0 34px;
    line-height: 1.75;
    color: #7b7269;
    word-break: keep-all;
}

/* ── 입력 한 칸 ─────────────────────────────────────────── */

#mb_login .auth_field { margin: 0 0 14px; }

#mb_login .auth_label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #6b6058;
    margin: 0 0 9px;
}

#mb_login .auth_label em {
    font-style: normal;
    color: #b08d57;
    margin-left: 3px;
}

/* 입력칸 + 버튼을 한 줄에 고르게 */
#mb_login .phone_row {
    display: grid;
    grid-template-columns: 1fr 128px;
    gap: 8px;
    align-items: stretch;
}

#mb_login .phone_row input,
#mb_login .auth_input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 1px solid #ded7cc;
    border-radius: 8px;
    background: #fff;
    font-size: 15.5px;
    letter-spacing: .01em;
    color: #1f1b17;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .16s, box-shadow .16s;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#mb_login .phone_row input::placeholder,
#mb_login .auth_input::placeholder { color: #b3aaa0; letter-spacing: 0; }

#mb_login .phone_row input:focus,
#mb_login .auth_input:focus {
    outline: none;
    border-color: #b08d57;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .12);
}

/* 인증번호는 또박또박 보이게 */
#mb_login #login_code {
    letter-spacing: .42em;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    padding: 0 12px;
}

#mb_login #login_code::placeholder { letter-spacing: .06em; font-size: 15px; font-weight: 400; }

/* ── 단추 ───────────────────────────────────────────────── */

#mb_login .btn_auth {
    height: 56px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #1f1b17;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background .16s;
    width: 100%;
    box-sizing: border-box;
}

/*
 * 로그인 · 인증번호 받기 — 마이페이지 [인연머니 내역] 과 같은 금빛 (2026-09-11 대표님 지시).
 * 금빛이 천천히 흐르고 빛 한 줄기가 지나간다.
 * 두 결(goldShimmer · shimmerWave)은 default.css 에 이미 있어 이름만 쓴다.
 */
#mb_login .btn_auth,
#mb_login .btn_auth.gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #B8956A 0%, #D4BC84 30%, #E8D5A3 50%, #D4BC84 70%, #C9A86C 100%);
    background-size: 200% 200%;
    animation: goldShimmer 3s ease infinite;
    color: #333;
    box-shadow:
        0 4px 15px rgba(201, 168, 108, .4),
        0 0 20px rgba(232, 213, 163, .3),
        inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .18s, box-shadow .18s, filter .18s;
}

/* 빛 한 줄기 */
#mb_login .btn_auth::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: shimmerWave 2s infinite;
    pointer-events: none;
}

/* 안쪽 윗빛 */
#mb_login .btn_auth::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, .5);
    pointer-events: none;
}

#mb_login .btn_auth:hover:not(:disabled),
#mb_login .btn_auth.gold:hover:not(:disabled) {
    background: linear-gradient(135deg, #B8956A 0%, #D4BC84 30%, #E8D5A3 50%, #D4BC84 70%, #C9A86C 100%);
    background-size: 200% 200%;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 25px rgba(201, 168, 108, .5),
        0 0 30px rgba(232, 213, 163, .4),
        inset 0 1px 0 rgba(255, 255, 255, .5);
}

#mb_login .btn_auth:active:not(:disabled) { transform: translateY(0) scale(1); }
#mb_login .btn_auth:focus-visible { outline: 2px solid #8a6a3c; outline-offset: 3px; }

/* 누를 수 없을 때(보내는 중 · 기다리는 중)는 빛을 멈추고 흐리게 */
#mb_login .btn_auth:disabled {
    background: #d9d2c6;
    color: #8a8d92;
    animation: none;
    box-shadow: none;
    cursor: default;
}

#mb_login .btn_auth:disabled::before { animation: none; display: none; }

/* 움직임이 불편하신 분께는 멈춘 채로 */
@media (prefers-reduced-motion: reduce) {
    #mb_login .btn_auth,
    #mb_login .btn_auth::before { animation: none; }

    #mb_login .btn_auth:hover:not(:disabled) { transform: none; }
}

#mb_login .btn_submit { margin-top: 4px; }

/* ── 2단계 (인증번호) ───────────────────────────────────── */

#mb_login .code_wrap { display: none; }
#mb_login .code_wrap.on { display: block; }

#mb_login .code_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 9px;
}

#mb_login .code_head .auth_label { margin: 0; }

#mb_login .auth_timer {
    float: none;
    font-size: 12.5px;
    font-weight: 700;
    color: #b3261e;
    font-variant-numeric: tabular-nums;
}

#mb_login .auth_resend {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12.5px;
    color: #6b6058;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

#mb_login .auth_resend:disabled { color: #b3aaa0; cursor: default; text-decoration: none; }

/* ── 안내 상자 ──────────────────────────────────────────── */

#mb_login .auth_notice {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid #ece4d8;
    background: #fbf8f4;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.75;
    color: #6b5a44;
    word-break: keep-all;
}

#mb_login .auth_notice b { color: #1f1b17; }

#mb_login .auth_code_view {
    display: inline-block;
    margin-top: 6px;
    padding: 7px 15px;
    background: #fff;
    border: 1px solid #e0d6c6;
    border-radius: 7px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .3em;
    color: #1f1b17;
}

#mb_login .auth_error {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #f0c9c9;
    background: #fff6f6;
    border-radius: 8px;
    font-size: 13.5px;
    color: #b3261e;
    line-height: 1.7;
}

/* ── 아래 안내 · 링크 ───────────────────────────────────── */

#mb_login #login_info {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eee7dd;
}

#mb_login .login_if_auto { margin: 0 0 12px; }

#mb_login .login_if_lpl {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#mb_login .login_if_lpl p { margin: 0; font-size: 13.5px; color: #7b7269; }
#mb_login .login_if_lpl a { color: #1f1b17; font-weight: 700; text-decoration: underline; }

/* ── 테스트 로그인 ──────────────────────────────────────── */

#mb_login .dev_select {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #ded7cc;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #1f1b17;
    box-sizing: border-box;
    margin: 0 0 12px;
    font-family: inherit;
    appearance: auto;
}

#mb_login .dev_warn { border-color: #e6cfa6; background: #fdf8ef; color: #7a6136; }

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 900px) {
    #mb_login .mbskin_box { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 520px) {
    #mb_login .mbskin_box { padding-left: 18px; padding-right: 18px; }
    #mb_login .phone_row { grid-template-columns: 1fr; }
    #mb_login .phone_row input,
    #mb_login .auth_input,
    #mb_login .btn_auth,
    #mb_login .dev_select { height: 52px; font-size: 15px; }
    #mb_login #login_code { font-size: 18px; }
    #mb_login .login_if_lpl { flex-direction: column; gap: 7px; }
}

/* ─────────────────────────────────────────────────────────────
   회원가입 — 로그인과 같은 모양으로 맞춘다
   ───────────────────────────────────────────────────────────── */

.register .phone_row {
    display: grid;
    grid-template-columns: 1fr 128px;
    gap: 8px;
    align-items: stretch;
}

.register .phone_row input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 1px solid #ded7cc;
    border-radius: 8px;
    background: #fff;
    font-size: 15.5px;
    color: #1f1b17;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.register .phone_row input:focus {
    outline: none;
    border-color: #b08d57;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .12);
}

.register .phone_row button {
    height: 56px;
    width: 100%;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #1f1b17;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

.register .phone_row button:hover:not([disabled]) { background: #352f27; }
.register .phone_row button[disabled] { background: #c9c2b8; border-color: #c9c2b8; cursor: default; }

@media (max-width: 520px) {
    .register .phone_row { grid-template-columns: 1fr; }
    .register .phone_row input,
    .register .phone_row button { height: 52px; font-size: 15px; }
}

/* ── 인증번호 보낸 뒤 드리는 말 (2026-09-12) ───────────── */

#mb_login .auth_hint {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #6b5a44;
    word-break: keep-all;
}

#mb_login .auth_hint.is_bad { color: #b3261e; font-weight: 600; }

#mb_login .auth_devcode {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #e6ded2;
    background: #fbf8f4;
    border-radius: 8px;
    font-size: 13px;
    color: #6b5a44;
}

#mb_login .auth_devcode b { color: #1f1b17; letter-spacing: .12em; }

/* 기다리는 동안 — 눌러도 소용없음을 눈으로 알 수 있게 */
#mb_login #btnSendCode[disabled] { opacity: .55; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────
   2026-10-13 대표님 — "암호화되어 저장 …" 문장을 걷고 칸 정렬 · 간격 맞춤
   ───────────────────────────────────────────────────────────── */

/*
 * 인증번호 칸 — 옛 member.css 의 "#mb_login #login_fs input[type=text]"(테두리 없이 밑줄만 · 높이 50/40 · 아래 여백 10)가
 * 번호 칸(type=tel 이라 안 걸림)과 달리 인증번호 칸(type=text)에만 걸려 밑줄 칸으로 보였다.
 * 같은 힘의 선택자로(이 파일이 뒤에 실려 이긴다) 번호 칸과 같은 상자 · 높이로 맞춘다. 누를 때 테두리도 번호 칸과 같게.
 */
#mb_login #login_fs input.auth_input {
    height: 56px;
    margin: 0;
    border: 1px solid #ded7cc;
    border-radius: 8px;
    box-shadow: none;
}

#mb_login #login_fs input.auth_input:focus {
    border-color: #b08d57;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .12);
}

/* 유효 시간 안내 한 줄 — 번호 칸 바로 아래 · 상자 모양은 그대로 작게 */
#mb_login .auth_notice.auth_ttl {
    margin: 12px 0 0;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.6;
}

/* 인증번호 칸 묶음 — 위 안내와 사이 22px(휴대폰 20px) · 인증번호 칸과 로그인 단추 사이(18px)와 비슷한 결로 */
#mb_login .code_wrap.on { margin-top: 8px; }   /* 번호 칸 묶음 아래 여백 14 + 8 = 22 */

@media (max-width: 520px) {
    #mb_login #login_fs input.auth_input { height: 52px; }
    #mb_login .auth_notice.auth_ttl { margin-top: 10px; font-size: 12.5px; }
    #mb_login .code_wrap.on { margin-top: 6px; }
}

/* ─────────────────────────────────────────────────────────────
   2026-10-19 대표님 4번 그림 — 회원가입 단추 (인증번호 받기 아래 · 두 폼 다음)
   인증번호 받기 · 로그인(금빛 흐름)보다 한 단계 낮은 단추 — 흰 바탕 · 금빛 테두리 · 같은 높이(56 · 휴대폰 52)
   ───────────────────────────────────────────────────────────── */

#mb_login .mbskin_box > .join_cta {
    max-width: 460px;
    box-sizing: border-box;
    margin: 30px 0 0;
    padding-top: 24px;
    border-top: 1px solid #eee7dd;
    text-align: left;
}

#mb_login .join_cta p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #7b7269;
    word-break: keep-all;
}

#mb_login .join_cta .btn_join {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1px solid #c9a86c;
    border-radius: 8px;
    background: #fff;
    color: #8a6a3c;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    box-sizing: border-box;
    transition: background .16s, box-shadow .16s, transform .16s;
}

#mb_login .join_cta .btn_join:hover {
    background: #fbf6ee;
    box-shadow: 0 4px 14px rgba(201, 168, 108, .22);
    transform: translateY(-1px);
}

#mb_login .join_cta .btn_join:active { transform: none; }
#mb_login .join_cta .btn_join:focus-visible { outline: 2px solid #8a6a3c; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    #mb_login .join_cta .btn_join:hover { transform: none; }
}

@media (max-width: 520px) {
    #mb_login .mbskin_box > .join_cta { margin-top: 26px; padding-top: 20px; }
    #mb_login .join_cta .btn_join { height: 52px; }
}

/*
 * 가입 화면 동의 칸 — 관리자 [푸터 · 회사정보 › 약관 · 방침] 의 이용약관 · 개인정보처리방침 글 (2026-10-19 · auth/join.blade.php)
 * 전엔 견본 글 textarea · 견본 표였다. 칸 안에서만 내려 읽고(180px) · 표 · 목록 · 소제목은 홈페이지 약관 화면처럼.
 * member.css 의 "#fregister_private div { padding:20px }" 가 글 속 div 에도 옮지 않게 #fregister 로 덮는다.
 */
#fregister .policy_box { display:block; height:180px; overflow-y:auto; padding:18px 20px; background:#fff; color:#444; font-size:13.5px; line-height:1.7; text-align:left; word-break:keep-all; overflow-wrap:anywhere; box-sizing:border-box; }
#fregister .policy_box:focus-visible { outline:2px solid #c5a059; outline-offset:-2px; }
#fregister .policy_box div { padding:0; background:transparent; }
#fregister .policy_box > :first-child { margin-top:0; }
#fregister .policy_box h1, #fregister .policy_box h2, #fregister .policy_box h3, #fregister .policy_box h4 { margin:14px 0 6px; color:#222; font-size:14px; font-weight:700; }
/* member.css 의 "#fregister p"(맨 위 안내 줄 — 회색 띠 · 흰 굵은 글 · 높이 50px · 왼쪽 검은 막대)가 약관 글 문단 · [전체 보기] 줄에도 옮지 않게 되돌린다 */
#fregister .policy_box p, #fregister p.policy_box_more { position:static; height:auto; margin:0 0 8px; padding:0; border-radius:0; background:none; color:#444; font-size:inherit; font-weight:400; line-height:1.7; text-align:left; }
#fregister .policy_box p:before, #fregister p.policy_box_more:before { content:none; display:none; }
#fregister .policy_box ul, #fregister .policy_box ol { margin:0 0 8px; padding-left:20px; }
#fregister .policy_box ul li { list-style:disc; }
#fregister .policy_box ol li { list-style:decimal; }
#fregister .policy_box table { width:100%; margin:6px 0 10px; border-collapse:collapse; font-size:12.5px; }
#fregister .policy_box th, #fregister .policy_box td { width:auto; padding:6px 8px; border:1px solid #e3e5e8; vertical-align:top; word-break:keep-all; overflow-wrap:normal; }
#fregister .policy_box th { background:#f7f7f9; color:#222; }
#fregister .policy_box a { color:#8a6d2f; text-decoration:underline; }
#fregister .policy_box p.policy_box_empty { margin:0; color:#888; }
#fregister p.policy_box_more { margin:6px 0 0; text-align:right; font-size:13px; }
#fregister .policy_box_more a { color:#8a6d2f; text-decoration:underline; }
#fregister .policy_box .policy_tbl { overflow-x:auto; }
#fregister .policy_box .policy_tbl table { margin:6px 0 10px; }
/* 가입 화면 맨 위 안내 줄 — member.css 가 높이 50px 한 줄로 묶어 휴대폰에서 "…동의하셔야" 뒤가 잘렸다 → 줄을 바꿔 다 보이게 (2026-10-19) */
/* 이 CSS 뒤에 member.css 가 실리므로 같은 무게면 옛 규칙이 이긴다 → :first-of-type 으로 한 단계 무겁게 */
#fregister > p:first-of-type { height:auto; min-height:50px; padding:13px 14px 13px 22px; line-height:1.5; word-break:keep-all; box-sizing:border-box; }
#fregister > p:first-of-type:before { top:0; bottom:0; height:auto; }