/* ===========================================================
 * Day 43 Phase 3-1A — Login.razor 전역 CSS
 * 시안 정합 (Dark + Glassmorphism + 중앙 카드)
 * 명세서 §3-1-2 정합 100%
 * =========================================================== */

/* ===== 페이지 영역 ===== */
.app-login-page {
    min-height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
}

.app-login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

/* ===== 중앙 영역 ===== */
.app-login-center {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ===== 마스코트 영역 ===== */
.app-login-mascot {
    width: 160px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
}

/* ===== 로고 영역 ===== */
.app-login-logo-wrap {
    text-align: center;
    margin-bottom: 8px;
}

.app-login-logo-img {
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.app-login-logo-text {
    font-size: 48px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    margin: 0;
    letter-spacing: -1px;
}

/* ===== 카드 영역 ===== */
.app-login-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.72);
    /* S7-NOBLUR(2026-09-06 지시) · backdrop-filter 제거 — 모바일 엔진이 모달/팝업 뒷배경을 좌우반전·깨짐으로 그리는 사고. 어두운 반투명만 쓴다. */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== 알림 영역 ===== */
.app-login-alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #ffffff;
}

.app-login-alert-warning {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* ===== 입력 영역 ===== */
.app-input-wrap {
    width: 100%;
}

.app-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.app-input::placeholder {
    color: #9ca3af;
}

.app-input:focus {
    border-color: var(--app-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.app-input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ===== 보안코드 영역 ===== */
.app-captcha-row {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 8px;
}

.app-input-captcha {
    width: 100%;
}

.app-captcha-box {
    height: 48px;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
    letter-spacing: 4px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s;
}

.app-captcha-box:hover {
    transform: scale(1.02);
}

.app-captcha-box:active {
    transform: scale(0.98);
}

/* ===== 버튼 영역 ===== */
.app-btn {
    height: 48px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-btn-block {
    width: 100%;
}

.app-btn-half {
    flex: 1;
}

.app-btn-primary {
    background: var(--app-primary, #2563eb);
    color: #ffffff;
}

.app-btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
}

.app-btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}

.app-btn-primary:disabled {
    background: #475569;
    color: #cbd5e1;
    cursor: not-allowed;
}

.app-btn-secondary {
    background: rgba(30, 41, 59, 0.95);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.app-btn-secondary:hover {
    background: rgba(51, 65, 85, 0.95);
}

/* ===== 회원가입 영역 ===== */
.app-signup-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* ===== 반응형 영역 ===== */
@media (max-width: 480px) {
    .app-login-center {
        padding: 16px;
        gap: 12px;
    }

    .app-login-mascot {
        width: 120px;
    }

    .app-login-logo-text {
        font-size: 36px;
    }

    .app-login-card {
        padding: 20px;
    }
}

/* ==========================================================================
   LOGIN-PAGE · 아트 기반 로그인(dg_4001 레퍼런스 축).
   ⚠️ 위 규칙들은 **무접촉** — `.app-login-page` / `.app-input` / `.app-btn` 은
      Join · JoinCoin · LoginModal · JoinCodeModal · MainLayout 이 **함께 쓰는 공유 클래스**다(실측).
      그래서 그것들을 고쳐 리디자인하면 회원가입 2화면과 **도어 0/2 모드의 주 로그인 경로인
      LoginModal 까지 같이 변형**된다. 신규 규칙은 전부 `.login_page` 스코프 안에만 둔다.
   색은 --app-* 토큰만, 자산·좌표는 app-front.css 의 LOGIN ASSETS 변수만 참조(리터럴 0).
   ========================================================================== */

/* 최외곽 — 배경 사진은 잘려도 무방하므로 cover. */
.login_page {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--login-stage-bg);
    background-image: var(--login-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 아트 스테이지 — 아트 비율을 고정해 두고 뷰포트 안에 **전부** 들어가게 한다(contain 상당).
   폼이 이 스테이지의 자식이라 아트가 축소돼도 폼과의 상대 위치가 유지된다. */
.login_stage {
    position: relative;
    aspect-ratio: var(--login-art-ratio);
    width: min(100%, calc(100vh * (var(--login-art-ratio))));
    max-width: 100%;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 아트 레이어 — 폰 프레임이 그려진 PNG. 절대 잘리지 않아야 하므로 contain. */
.login_art {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--login-art);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 폼 — 스테이지 중앙 기준 + 변수 보정.
   ⚠️ 앞 회차 구현 정정: `transform: translate(%)` 의 % 는 **자기 자신(폼) 크기 기준**이라
      스테이지에 비례하지 않는다(폼 높이가 바뀌면 보정량도 바뀜 = 정렬이 어긋남).
      → 보정을 `left/top` 으로 옮긴다. 여기의 % 는 **부모(스테이지) 기준**이라 아트와 정확히 같은 축이 된다.
      transform 은 자기 중심 정렬(-50%)만 담당. */
.login_form {
    position: absolute;
    z-index: 1;
    left: calc(50% + var(--login-form-x));
    top: calc(50% + var(--login-form-y));
    transform: translate(-50%, -50%);
    width: min(var(--login-form-w), calc(100% - 40px));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 마스코트 — SITE_MASCOT_IMAGE 설정 시에만 렌더(기존 기능 보존). */
.login_mascot {
    width: 120px;
    height: auto;
    object-fit: contain;
    align-self: center;
    margin-bottom: 2px;
}

/* 로고 — 정적 자산(img/Logo/s7_demo.png). DB 조회·사이트명 텍스트 폴백 없음.
   로드 실패 시 onerror 가 자기 자신을 감추므로 wrap 을 두지 않는다(빈 자리·여백 잔재 0). */
.login_logo_img {
    display: block;
    max-width: 107px;
    width: 100%;
    height: auto;
    margin: 0 auto 6px;
    object-fit: contain;
}

/* 입력 — 레퍼런스 톤(둥근 모서리·채운 배경·전폭). 색은 토큰만. */
.login_in {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: #fbfbfb;
    border: 1px solid #c5c5c5;
    border-radius: var(--app-radius-sm);
    color: #0f0f0f;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.login_in::placeholder { color: var(--app-text-dim); }

.login_in:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px var(--app-primary-tint);
}

.login_in:disabled { opacity: .6; cursor: not-allowed; }

/* 비밀번호 눈 아이콘 */
.login_pw { position: relative; }

.login_eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    color: var(--app-text-muted);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.login_eye:hover { color: var(--app-text-primary); }

/* 보안문자 — 서버 SVG 캡차(B-99). 레퍼런스에 없어도 보안상 유지한다. */
.login_cap { display: flex; gap: 8px; align-items: stretch; }
.login_cap .login_in { flex: 1 1 auto; min-width: 0; }

.login_cap_box {
    flex: none;
    width: 110px;
    height: 46px;
    background: var(--app-bg-panel-3);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.login_hint {
    font-size: 11px;
    color: var(--app-text-muted);
    margin-top: -4px;
}

/* 버튼 */
.login_btn {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: var(--app-radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}

.login_btn:hover:not(:disabled) { filter: brightness(1.08); }
.login_btn:active:not(:disabled) { transform: translateY(1px); }
.login_btn:disabled { opacity: .6; cursor: not-allowed; }

.login_btn_primary {
    background: #eb9d25;
    color: #2d2d2d;
}

.login_btn_sub {
    background: var(--app-bg-panel-2);
    color: var(--app-text-primary);
    border: 1px solid var(--app-border);
}

/* 회원가입 2분할 — 무기명가입이 꺼져 있으면 회원가입이 전폭이 된다(빈칸 없음). */
.login_row2 { display: flex; gap: 8px; }
.login_row2 > * { flex: 1 1 0; min-width: 0; }

/* 소셜(텔레그램·카카오) — SocialContactButtons 컴포넌트를 **그대로 재사용**하고 스타일만 정렬한다.
   ⚠️ 그 컴포넌트는 LoginModal 도 쓰므로(실측) 컴포넌트·클래스 자체는 손대지 않고,
      `.login_page` 스코프 **안에서만** 모양을 준다 → 모달 회귀 0.
   ⚠️ 실측: `.app-social-*` 는 CSS 정의가 어디에도 없었다(맨 링크 상태) — 여기가 첫 스타일. */
.login_page .app-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.login_page .app-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: var(--app-radius-sm);
    background: var(--app-bg-panel-2);
    border: 1px solid var(--app-border);
    color: var(--app-text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .15s, border-color .15s;
}

.login_page .app-social-btn:hover {
    filter: brightness(1.08);
    border-color: var(--app-border-soft);
}

/* 아이콘 색만 채널 구분(배경은 폼 톤 유지 — 카드 안에서 튀지 않게). */
.login_page .app-social-telegram svg { color: var(--app-info); }
.login_page .app-social-kakao svg { color: var(--app-warning); }

/* 모바일 — 기존 s2 컷(1023.98) 재사용. 신규 브레이크포인트 0.
   레퍼런스도 모바일은 폰 프레임만 남기는 형태라 아트에 종속될 이유가 없다
   → 아트 레이어를 접고 폼만 중앙에 세운다(390px 에서 잘림 없음). */
@media (max-width: 1023.98px) {
    .login_stage {
        aspect-ratio: auto;
        width: 100%;
        max-height: none;
        min-height: 100vh;
    }

    .login_art { display: none; }

    /* 아트가 없으니 좌표 보정도 무의미 — 절대배치를 풀고 흐름 중앙으로 되돌린다.
       폼 폭은 % 가 아니라 px 상한(--login-form-w-mobile)으로 잡아 390px 에서도 잘리지 않는다. */
    .login_form {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: min(var(--login-form-w-mobile), calc(100vw - 32px));
    }
}

/* ===========================================================
 * CF §D · 비밀번호 눈 토글 공용(pwi — PasswordInput 컴포넌트) — 구 login_pw/login_eye(👁) 흡수.
 * 기본 = 가려짐(fa-eye) / 클릭 시 노출(fa-eye-slash). 소비 = 가입 3종 + Login + LoginModal.
 * =========================================================== */
.pwi_wrap { position: relative; width: 100%; }
.pwi_wrap .pwi_in { width: 100%; padding-right: 40px; }
.pwi_eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; padding: 4px 6px;
    font-size: 14px; color: var(--app-text-muted, #8a939b); line-height: 1;
}
.pwi_eye:hover { color: var(--app-text-primary, #e8edf2); }