/* ============================================================
   인증 화면(로그인 + 회원가입) 공통 — 화이트 미니멀 + Pretendard
   테마 변수에 의존하지 않는 자체 완결 스타일(항상 화이트)
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --ink       : #1F1A15;   /* 본문/제목 */
    --ink2      : #73685B;   /* 보조 텍스트 */
    --line      : #E7E1D7;   /* 외곽선 */
    --accent    : #EE5239;   /* 메인 — 진한 코랄 */
    --accent-h  : #E03E2B;   /* hover (좀 더 딥) */
    --accent-ink: #FFFFFF;   /* accent 위 글씨/체크 — 흰색(진한 코랄이라 대비 충분) */
    --kakao     : #FEE500;  --kakao-ink: #1A1400;
    --naver     : #03C75A;

    /* 홈 톤(이메일 로그인 .elog · 회원가입 위저드 공용) — 항상 화이트, 파스텔 브랜드 */
    --hc-card      : #FFFFFF;   /* 카드 배경 */
    --white        : #FFFFFF;   /* 카드/버튼 글씨 흰색 */
    --hc-text      : #3A3A4A;   /* 본문/제목 */
    --hc-text2     : #9A93AE;   /* 보조 텍스트 */
    --hc-text3     : #ABA3BC;   /* 플레이스홀더/비활성 글씨 */
    --hc-muted     : #6B6480;   /* 흐린 텍스트 */
    --hc-line      : #F4EFF6;   /* 구분선/입력 외곽 */
    --hc-soft      : #F1ECF6;   /* 연한 배경(알약/비활성 입력) */
    --hc-row       : #FBF8FC;   /* 입력 배경 */
    --hc-disabled  : #E7E1EE;   /* 비활성 버튼 배경 */
    --brand-pink   : #FF9EB5;   /* 브랜드 그라데이션 시작 */
    --brand-purple : #B89BE6;   /* 브랜드 그라데이션 끝 */
    --radius-pill  : 999px;     /* 알약 반경 */
}

html, body { height: 100%; }

body {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, system-ui, sans-serif;
    background : #FFFFFF;
    color      : var(--ink);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.2px;
}

/* ===== 공통 뷰 컨테이너 (진입/이메일) ===== */
.lg {
    max-width     : 440px;
    margin        : 0 auto;
    min-height    : 100dvh;
    display        : flex;
    flex-direction : column;
    padding        : 30px 26px calc(28px + env(safe-area-inset-bottom));
}

.lg[hidden] { display: none; }

/* ===== 진입 화면 ===== */
.lg_hero {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    text-align     : center;
    padding-bottom : 24px;
}

.lg_brand {
    font-size     : 46px;
    font-weight   : 700;
    letter-spacing: -1.8px;
    color         : var(--ink);
}

.lg_brand .dot { color: var(--accent); }

.lg_tag {
    margin-top : 12px;
    font-size  : 14px;
    font-weight: 500;
    color      : var(--ink2);
}

/* ===== 소셜 버튼 스택 ===== */
.lg_stack { display: flex; flex-direction: column; gap: 10px; }

.lg_btn {
    height         : 54px;
    border-radius  : 27px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    width          : 100%;
    border         : none;
    cursor         : pointer;
    font-family    : inherit;
    font-size      : 15px;
    font-weight    : 500;
    letter-spacing : -0.3px;
    transition     : transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}

.lg_btn:active { transform: translateY(1px); }
.lg_btn svg    { display: block; }

.lg_kakao  { background: var(--kakao); color: var(--kakao-ink); }
.lg_kakao:hover  { filter: brightness(.97); }
.lg_naver  { background: var(--naver); color: #fff; }
.lg_naver:hover  { filter: brightness(.96); }
.lg_google { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.lg_google:hover { background: #FAF7F2; }

/* ===== 이메일 화면 ===== */
.lg_top { display: flex; align-items: center; min-height: 40px; }

.lg_back {
    background : none;
    border     : none;
    cursor     : pointer;
    font-size  : 26px;
    line-height: 1;
    color      : var(--ink);
    padding    : 4px 8px 4px 0;
    margin-left: -4px;
}

.lg_etitle {
    margin     : 14px 0 22px;
    font-size  : 23px;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.lg_etitle.tight { margin-bottom: 7px; }   /* 부제가 뒤따를 때 */

.lg_subtag { margin: 0 0 22px; font-size: 14px; color: var(--ink2); }

.lg_field { margin-bottom: 13px; }

/* 이메일+버튼 한 줄 (코드 받기 / 확인) */
.lg_row { display: flex; gap: 8px; align-items: stretch; }
.lg_row .lg_input { flex: 1; }

.lg_subbtn {
    flex-shrink  : 0;
    min-width    : 96px;
    height       : 52px;
    padding      : 0 16px;
    border       : 1.5px solid var(--line);
    border-radius: 13px;
    background   : #fff;
    color        : var(--ink);
    font-family  : inherit;
    font-size    : 14px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : border-color .15s, color .15s, background .15s;
}

.lg_subbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lg_subbtn:disabled { background: #F4F1EC; color: #B6AB9C; cursor: default; }

.lg_input:disabled { background: #F6F3EE; color: #B6AB9C; }

.lg_hide { display: none !important; }

.lg_label {
    display    : block;
    font-size  : 13px;
    font-weight: 500;
    color      : var(--ink2);
    margin-bottom: 6px;
}

.lg_input {
    width        : 100%;
    height       : 52px;
    padding      : 0 15px;
    border       : 1.5px solid var(--line);
    border-radius: 13px;
    font-family  : inherit;
    font-size    : 15px;
    color        : var(--ink);
    background   : #fff;
    outline      : none;
    transition   : border-color .15s, box-shadow .15s;
}

.lg_input::placeholder { color: #C7C3BA; }
/* 포커스 — 강조 보더(색만 변경, 볼드 없음) */
.lg_input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* 테두리 없는 입력(밑줄만) — 이메일 인증 단계 */
.lg_input_bare {
    border       : none;
    border-bottom: 1.5px solid var(--line);
    border-radius: 0;
    height       : 50px;
    padding      : 0 2px;
    font-size    : 17px;
}

.lg_input_bare:focus    { border-bottom-color: var(--accent); box-shadow: none; }
.lg_input_bare:disabled { background: none; color: #B5B5B5; }

/* 본문 전체폭 버튼(이메일 인증 단계) */
.lg_wbtn {
    width        : 100%;
    height       : 52px;
    margin-top   : 22px;
    border       : none;
    border-radius: 12px;
    background   : var(--accent);
    color        : var(--accent-ink);
    font-family  : inherit;
    font-size    : 15px;
    font-weight  : 600;
    letter-spacing: -0.3px;
    cursor       : pointer;
    transition   : background .15s;
}

.lg_wbtn:hover:not(:disabled)  { background: var(--accent-h); }
.lg_wbtn:active:not(:disabled) { transform: translateY(1px); }
.lg_wbtn:disabled { background: #ECECEC; color: #B5B5B5; cursor: default; }

/* 입력 밑 인라인 오류 텍스트 (배경 없음) */
.lg_err { font-size: 12.5px; color: #C32F35; }
.lg_err:not(:empty) { margin-top: 7px; }

/* 더 강조된 오류 (인증코드 검증 실패 등) */
.lg_err_strong { font-size: 13.5px; font-weight: 700; color: #D6392B; }

/* 입력 끝 지우기(×) 버튼 */
.lg_inwrap { position: relative; }
.lg_inwrap .lg_input { padding-right: 34px; }

.lg_clear {
    position   : absolute;
    right      : 0;
    top        : 25px;
    transform  : translateY(-50%);
    width      : 28px;
    height     : 28px;
    border     : none;
    background : none;
    cursor     : pointer;
    color      : #B6AB9C;
    font-size  : 21px;
    line-height: 1;
    display    : none;
    align-items: center;
    justify-content: center;
}

.lg_clear.show  { display: flex; }
.lg_clear:hover { color: var(--ink2); }

/* 비밀번호 표시/숨김(눈) 토글 — × 왼쪽 */
.lg_inwrap.lg_pw_eye .lg_input { padding-right: 62px; }

.lg_eye {
    position   : absolute;
    right      : 30px;
    top        : 25px;
    transform  : translateY(-50%);
    width      : 28px;
    height     : 28px;
    border     : none;
    background : none;
    cursor     : pointer;
    color      : #9A8F80;
    padding    : 0;
    display    : none;
    align-items: center;
    justify-content: center;
}

.lg_eye.show       { display: flex; }
.lg_eye:hover      { color: var(--ink2); }

/* 눈 SVG 쌍 스왑 — 기본=뜬 눈(ico_on), .rv(revealed)=감은 눈(ico_off). join(.lg_eye)·login(.el_eye) 공용 */
.lg_eye .ico_off,   .el_eye .ico_off    { display: none; }
.lg_eye.rv .ico_on, .el_eye.rv .ico_on  { display: none; }
.lg_eye.rv .ico_off, .el_eye.rv .ico_off { display: block; }

/* 인증코드 유효시간 타이머 + 재전송 */
.lg_timer {
    position   : absolute;
    right      : 2px;
    top        : 25px;
    transform  : translateY(-50%);
    font-size  : 14px;
    font-weight: 600;
    color      : var(--accent);
    font-variant-numeric: tabular-nums;
}

#step_code .lg_inwrap .lg_input { padding-right: 56px; }

.lg_resend { margin-top: 10px; font-size: 12.5px; color: var(--ink2); text-align: right; }

.lg_resend button {
    background     : none;
    border         : none;
    padding        : 0;
    font-family    : inherit;
    font-size      : 12.5px;
    font-weight    : 600;
    color          : var(--ink);
    text-decoration: underline;
    cursor         : pointer;
}

.lg_resend button:disabled { color: #B5B5B5; text-decoration: none; cursor: default; }

.lg_remember {
    display    : flex;
    align-items: center;
    gap        : 7px;
    margin     : 6px 2px 4px;
    font-size  : 13px;
    color      : var(--ink2);
    cursor     : pointer;
}

.lg_remember input { accent-color: var(--accent); width: 16px; height: 16px; }

.lg_submit {
    width        : 100%;
    height       : 54px;
    margin-top   : 14px;
    border       : none;
    border-radius: 27px;
    background   : var(--accent);
    color        : var(--accent-ink);
    font-family  : inherit;
    font-size    : 15px;
    font-weight  : 600;
    letter-spacing: -0.3px;
    cursor       : pointer;
    transition   : background .15s, transform .08s;
}

.lg_submit:hover:not(:disabled)  { background: var(--accent-h); }
.lg_submit:active:not(:disabled) { transform: translateY(1px); }
.lg_submit:disabled { background: #ECECEC; color: #B5B5B5; cursor: default; }

.lg_alt { text-align: center; font-size: 14px; color: var(--ink2); margin-top: 20px; }
.lg_alt a { color: var(--ink); font-weight: 700; text-decoration: none; }

/* 안내 메시지 (성공/실패) — .show 로 노출 */
.lg_msg {
    display      : none;
    align-items  : center;
    gap          : 7px;
    border-radius : 11px;
    padding       : 11px 13px;
    font-size     : 13.5px;
    margin-bottom : 16px;
}

.lg_msg.show { display: flex; }
.lg_msg.ok   { background: #E7F4E9; color: #2F7A41; }
.lg_msg.err  { background: #FBEAEB; color: #C32F35; }

/* ============================================================
   회원가입 위저드 — 단계 인디케이터 + 약관
   ============================================================ */

/* 상단: 뒤로 + 단계(컴팩트) + 홈으로 */
.lg_wtop { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.lg_wtop .lg_back { padding: 4px 6px 4px 0; margin-left: -4px; }

.lg_steps { display: flex; align-items: center; }

.lg_nd {
    width      : 7px;
    height     : 7px;
    border-radius: 50%;
    background : #DBD5CB;
    flex-shrink: 0;
    transition : background .2s, width .2s, height .2s;
}

.lg_nd.done { background: var(--accent); }

.lg_nd.cur {
    width      : 18px;
    height     : 18px;
    display    : flex;
    align-items: center;
    justify-content: center;
    background  : var(--accent);
    color       : var(--accent-ink);
    font-size   : 10px;
    font-weight : 700;
}

.lg_bar { width: 20px; height: 2px; background: #E5DFD5; margin: 0 4px; transition: background .2s; }
.lg_bar.on { background: var(--accent); }

/* 단계 컨테이너 */
.lg_step { display: flex; flex-direction: column; flex: 1; }
.lg_step[hidden] { display: none; }

.lg_wtitle {
    margin     : 16px 0 0;
    font-size  : 19px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.5px;
}

.lg_grow { flex: 1; }

/* 위저드 하단 풀블리드 버튼 (좌우·하단 끝까지) */
.lg_wizard { padding-bottom: 0; }

/* 폼이 화면을 채워 하단 버튼이 바닥에 docked 되게 */
.lg_form { display: flex; flex-direction: column; flex: 1; }

.lg_btmbtn {
    margin       : 16px -26px 0;
    min-height   : 56px;
    padding      : 0 0 env(safe-area-inset-bottom);
    border       : none;
    border-radius: 0;
    background   : var(--accent);
    color        : var(--accent-ink);
    font-family  : inherit;
    font-size    : 16px;
    font-weight  : 600;
    letter-spacing: -0.3px;
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    justify-content: center;
    transition   : background .15s;
}

.lg_btmbtn:hover:not(:disabled)  { background: var(--accent-h); }
.lg_btmbtn:active:not(:disabled) { background: var(--accent-h); }
.lg_btmbtn:disabled { background: #ECECEC; color: #B5B5B5; cursor: default; }

/* ===== 약관 동의 ===== */
.lg_agall {
    display    : flex;
    align-items: center;
    justify-content: space-between;
    padding    : 8px 2px 14px;
    margin-top : 22px;
    cursor     : pointer;
}

.lg_agall .t { font-size: 16px; font-weight: 700; color: var(--ink); }

.lg_hr { height: 1px; background: var(--line); margin: 0 0 4px; }

.lg_ag {
    display    : flex;
    align-items: center;
    justify-content: space-between;
    padding    : 12px 2px;
    cursor     : pointer;
}

.lg_ag .t      { font-size: 13.5px; color: var(--ink); }
.lg_ag .t u    { text-underline-offset: 2px; }
.lg_ag .t .req { color: var(--ink2); }

.lg_ck {
    width      : 24px;
    height     : 24px;
    border-radius: 50%;
    border     : 1.6px solid #D5CEC2;
    flex-shrink: 0;
    display    : flex;
    align-items: center;
    justify-content: center;
    color      : transparent;
    font-size  : 13px;
    font-weight: 700;
    transition : background .15s, border-color .15s, color .15s;
}

.lg_ck.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lg_agall .lg_ck { width: 26px; height: 26px; }

/* ===== 약관 모달 (placeholder) ===== */
.lg_modal_bd {
    position   : fixed;
    inset      : 0;
    z-index    : 80;
    background : rgba(0, 0, 0, .4);
    display    : none;
    align-items: center;
    justify-content: center;
    padding    : 24px;
}

.lg_modal_bd.show { display: flex; }

.lg_modal {
    width        : 100%;
    max-width    : 400px;
    max-height   : 70vh;
    background   : #fff;
    border-radius: 18px;
    display      : flex;
    flex-direction: column;
    overflow     : hidden;
}

.lg_modal_h {
    padding    : 18px 18px 12px;
    font-size  : 16px;
    font-weight: 700;
    display    : flex;
    align-items: center;
    justify-content: space-between;
}

.lg_modal_x { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink2); }

.lg_modal_b {
    padding   : 0 18px 20px;
    overflow-y: auto;
    font-size : 13.5px;
    color     : var(--ink2);
    line-height: 1.65;
}