@charset "utf-8";
/* =========================================================
   로그인 — 단독 페이지 + 레이어 팝업(모달) 공용
   공유 style.css를 건드리지 않도록 로그인 전용으로 분리
   ========================================================= */
.lg-scope{
    --lg-primary:var(--color-primary,#4f46e5);
    --lg-primary-hover:var(--color-primary-hover,#4338ca);
    --lg-primary-light:var(--color-primary-light,#f5f3ff);
    --lg-surface:var(--color-surface,#ffffff);
    --lg-text:var(--color-text-main,#0f172a);
    --lg-muted:var(--color-text-muted,#64748b);
    --lg-border:var(--color-border,#e2e8f0);
    --lg-r-md:12px; --lg-r-lg:16px;
    --lg-shadow:var(--shadow-soft,0 10px 25px -5px rgba(15,23,42,.05),0 8px 10px -6px rgba(15,23,42,.04));
    font-family:var(--font-family,'Nanum Gothic',sans-serif);color:var(--lg-text)}
.lg-scope *,.lg-scope *:before,.lg-scope *:after{box-sizing:border-box}
.lg-scope svg{display:block}
.lg-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
/* style.css 의 .selec_chk(인풋 숨김) 무력화 — 네이티브 체크박스 사용 */
.lg-scope .selec_chk{position:static;width:18px;height:18px;opacity:1;z-index:auto;overflow:visible;top:auto;left:auto}
.lg-scope label>span:empty{display:none !important}

/* ── 헤더 ── */
.lg-head{text-align:center;margin-bottom:22px}
.lg-title{margin:0 0 7px;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--lg-text)}
.lg-sub{margin:0;font-size:13.5px;color:var(--lg-muted);line-height:1.6}

/* ── 폼 ── */
.lg-form{margin:0}
.lg-field{margin-bottom:11px}
.lg-input{display:flex;align-items:center;gap:9px;height:50px;padding:0 14px;
    border:1px solid var(--lg-border);border-radius:var(--lg-r-md);background:var(--lg-surface);
    transition:border-color .15s,box-shadow .15s}
.lg-input:focus-within{border-color:var(--lg-primary);box-shadow:0 0 0 3px var(--lg-primary-light)}
.lg-input>.lg-ico{font-size:18px;color:var(--lg-muted)}
.lg-scope .lg-input input{flex:1;min-width:0;height:auto;margin:0;padding:0;border:0;outline:0;background:transparent;
    box-shadow:none;font-size:14.5px;font-family:inherit;color:var(--lg-text)}
.lg-scope .lg-input input::placeholder{color:#94a3b8}
/* default.css 의 .required 별표 배경 제거 */
.lg-scope .lg-input input.required{background-image:none !important}
.lg-eye{border:0;background:transparent;padding:4px;margin:0;color:#cbd5e1;cursor:pointer;flex:none;font-size:17px}
.lg-eye:hover{color:var(--lg-primary)}

/* 옵션 줄 */
.lg-opts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 0 16px}
.lg-auto{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
    font-size:13px;font-weight:700;color:var(--lg-muted);user-select:none}
.lg-auto:hover{color:var(--lg-primary)}
.lg-auto input{accent-color:var(--lg-primary);cursor:pointer;flex:none;margin:0}
.lg-find{font-size:13px;font-weight:700;color:var(--lg-muted);text-decoration:none}
.lg-find:hover{color:var(--lg-primary);text-decoration:underline}

/* 버튼 */
.lg-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;padding:0 20px;
    border:1px solid var(--lg-border);border-radius:var(--lg-r-md);background:var(--lg-surface);color:var(--lg-text);
    font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s;text-decoration:none}
.lg-btn-primary{background:var(--lg-primary);border-color:var(--lg-primary);color:#fff;
    box-shadow:0 4px 12px rgba(79,70,229,.2)}
.lg-btn-primary:hover{background:var(--lg-primary-hover);border-color:var(--lg-primary-hover)}
.lg-scope a.lg-btn-primary,.lg-scope a.lg-btn-primary:hover{color:#fff}

/* 회원가입 유도 */
.lg-join{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:18px;
    padding-top:18px;border-top:1px solid var(--lg-border);font-size:13.5px;color:var(--lg-muted)}
.lg-join span{text-align:center}
.lg-join a{display:flex;align-items:center;justify-content:center;width:100%;height:48px;
    border:1px solid var(--lg-primary);border-radius:12px;background:#fff;
    font-size:15px;font-weight:800;color:var(--lg-primary);text-decoration:none;transition:all .15s}
.lg-join a:hover{background:var(--lg-primary-light,#f5f3ff);text-decoration:none;color:var(--lg-primary)}

/* =========================================================
   회원정보 찾기 (password_lost) — 로그인 폼과 공용 스타일
   ========================================================= */
.lg-scope .lg-desc{margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--lg-muted);
    padding:12px 14px;background:var(--lg-primary-light,#f5f3ff);border-radius:var(--lg-r-md)}
.lg-scope .lg-captcha{margin:0 0 14px}
.lg-scope .lg-captcha #captcha,.lg-scope .lg-captcha .captcha{max-width:100%}
.lg-scope .lg-certbox{margin-top:18px;padding-top:18px;border-top:1px solid var(--lg-border)}
.lg-scope .lg-cert-or{display:block;text-align:center;margin-bottom:12px;
    font-size:12.5px;font-weight:700;color:var(--lg-muted)}
.lg-scope .lg-cert-btns{display:flex;flex-direction:column;gap:9px}
.lg-scope .lg-cert-btn{height:48px;font-size:14px;color:var(--lg-text)}
.lg-scope .lg-cert-btn>.lg-ico{font-size:17px;color:var(--lg-primary)}
.lg-scope .lg-cert-btn:hover{border-color:var(--lg-primary);background:var(--lg-primary-light,#f5f3ff)}
/* 찾기 폼의 '로그인으로 돌아가기' 는 회원가입 유도와 동일한 카드형 버튼 */

/* =========================================================
   단독 페이지 (bbs/login.php)
   ========================================================= */
#mb_login.lg-scope{width:100%;max-width:440px;margin:52px auto 72px;padding:0 16px;background:none}
/* style.css의 #mb_login h1 은 제목을 숨김(position:absolute;font-size:0) → 되살림 */
#mb_login.lg-scope h1.lg-title{position:static;width:auto;height:auto;overflow:visible;
    margin:0 0 7px;font-size:23px;line-height:1.3;clip:auto}
#mb_login .lg-card{background:var(--lg-surface);border:1px solid var(--lg-border);
    border-radius:var(--lg-r-lg);box-shadow:var(--lg-shadow);padding:34px 30px 30px}
@media (max-width:520px){
    #mb_login.lg-scope{margin:28px auto 48px}
    #mb_login .lg-card{padding:26px 20px 24px}
}

/* 쇼핑몰 비회원 영역 */
#mb_login .lg-guest{margin-top:16px;background:var(--lg-surface);border:1px solid var(--lg-border);
    border-radius:var(--lg-r-lg);box-shadow:var(--lg-shadow);padding:24px 22px}
#mb_login .lg-guest h2{margin:0 0 8px;font-size:16px;font-weight:800}
#mb_login .lg-guest p{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:var(--lg-muted)}
#mb_login #guest_privacy{max-height:180px;overflow-y:auto;padding:14px;margin-bottom:14px;
    border:1px solid var(--lg-border);border-radius:var(--lg-r-md);background:#fbfcfe;
    font-size:13px;line-height:1.7;color:#475569}

/* =========================================================
   레이어 팝업 (모달)
   ========================================================= */
.lg-modal{position:fixed;inset:0;z-index:10000;display:none;
    align-items:center;justify-content:center;padding:20px}
.lg-modal.is-open{display:flex}
.lg-modal-bg{position:absolute;inset:0;background:rgba(15,23,42,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lg-modal.is-open .lg-modal-bg{animation:lg-fade .2s ease}
.lg-modal-panel{position:relative;width:100%;max-width:400px;max-height:calc(100vh - 40px);overflow-y:auto;
    background:var(--lg-surface);border-radius:var(--lg-r-lg);
    box-shadow:0 24px 50px -12px rgba(15,23,42,.35);padding:30px 28px 26px}
.lg-modal.is-open .lg-modal-panel{animation:lg-up .25s cubic-bezier(.34,1.3,.64,1)}
@keyframes lg-fade{from{opacity:0}to{opacity:1}}
@keyframes lg-up{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
/* 닫힘 애니메이션 : 열림의 역방향 (토스트처럼 부드럽게 사라짐) */
.lg-modal.is-closing{display:flex}
.lg-modal.is-closing .lg-modal-bg{animation:lg-fade-out .22s ease forwards}
.lg-modal.is-closing .lg-modal-panel{animation:lg-down .22s ease-in forwards}
@keyframes lg-fade-out{from{opacity:1}to{opacity:0}}
@keyframes lg-down{from{opacity:1;transform:none}to{opacity:0;transform:translateY(16px) scale(.98)}}
.lg-modal-close{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--lg-muted);
    cursor:pointer;font-size:18px;transition:background .15s,color .15s}
.lg-modal-close:hover{background:#f1f5f9;color:var(--lg-text)}
body.lg-locked{overflow:hidden}

@media (max-width:520px){
    /* 하단·좌우 15px 띄운 플로팅 시트 : 아래에서 위로 슬라이드 업 */
    .lg-modal{padding:15px;align-items:flex-end}
    .lg-modal-panel{max-width:100%;border-radius:18px;padding:26px 20px 24px;
        max-height:calc(100vh - 30px)}
    .lg-modal.is-open .lg-modal-panel{animation:lg-sheet .32s cubic-bezier(.32,1.1,.55,1)}
    @keyframes lg-sheet{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
    /* 모바일 닫힘 : 아래로 내려가며 사라짐 */
    .lg-modal.is-closing .lg-modal-panel{animation:lg-sheet-out .25s ease-in forwards}
    @keyframes lg-sheet-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(60px)}}
}