/* ===========================================================
 * 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;
    /* 🔴 treebet-BG · `background-attachment: fixed` **제거**(덮어쓰기 아님 — 선언 자체를 뺀다).
       iOS Safari 는 fixed 첨부를 지원하지 않아 **배경 이미지가 아예 그려지지 않는다**(배경색만 남음 = 맨 검정).
       이 파일에서 모바일 배경을 죽일 수 있는 유일한 실재 선언이었다.
       ⚠️ 소비처 실측: `.app-login-page` 는 도어(`/login`)가 아니라 **Join·JoinCoin 2화면**이 쓴다
          (도어는 `.login_page` 스코프 별도). 두 가입 화면의 모바일 배경이 함께 고쳐진다.
       데스크톱 영향 = 배경이 스크롤에 고정되지 않고 함께 움직이는 것뿐(아트는 그대로 cover/center). */
    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.55);
    /* NOBLUR(2026-09-07 지시 · 전 미러 통일) · 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 {
    /* treebet-BG · 모바일 주소창 때문에 100vh 가 실제 가시영역보다 커서 배경 상자가 뷰포트와 어긋난다.
       dvh 를 **뒤에 병기**해 지원 브라우저만 실제 가시높이를 쓰게 한다(미지원은 앞 선언 유지 = 회귀 0). */
    min-height: 100vh;
    min-height: 100dvh;
    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/ceo_logo.webp). 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) {
    /* 지시(모바일 배경) · cover + center 는 이 배경(잎이 좌우 가장자리·중앙은 검정)에서
       모바일 세로 크롭이 정확히 **검은 중앙부**만 남겨 "배경이 안 나오는" 것처럼 보인다(실측 — 이미지 정상 로드).
       기존솔루션(tr-98)은 position 기본값(left top)이라 좌측 잎 기둥이 보였음 → 모바일만 좌측 앵커로 동기. */
    .login_page { background-position: center center; }   /* LOGIN-AIR-DARK · 배경 좌우 대칭(가운데 하늘·바닥) */

    .login_stage {
        aspect-ratio: auto;
        width: 100%;
        max-height: none;
        /* treebet-BG · 위 .login_page 와 같은 축(vh → dvh 병기). 스테이지가 페이지보다 커지면
           페이지 배경 상자가 뷰포트를 넘겨 상단이 잘려 보인다. */
        min-height: 100vh;
        min-height: 100dvh;
    }

    .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));
    }
}

/* ============================================================================
   LOGIN-AIR-DARK(2026-10-13 지시) · 로그인 = airplane 로그인 폼 구조(카드 420px · 패딩 · pill 버튼 · 위치 -5%)
   + 어두운 계열 — 로고가 흰색이라 카드 자체를 검정 계열로 · 입력·회원가입 버튼도 다크 · 강조색 = 티파니 민트.
   ⚠️ 구조·클래스명 무변경 — 위 LOGIN-PAGE 규칙 위에 `.login_page` 스코프 덮어쓰기(스킨만). 구 CEO-LOGIN(골드) 대체.
   자산: 배경 /img/login/login_bg_main.webp (app-front.css --login-bg · 스테이지 비율 1672/941).
   ============================================================================ */

/* 바탕 — 배경 이미지 로드 전/레터박스 자리(배경 톤과 같은 밝은 청록). */
.login_page { background-color: #8fd3e0; }

/* 카드 — 검정 반투명(블러 금지 규약 · NOBLUR) + 가는 민트 라인. 배치 축(absolute·중앙)은 기존 규칙 그대로. */
.login_page .login_form {
    padding: 40px 34px 30px;
    border-radius: 20px;
    background: rgba(6, 10, 12, .88);
    border: 1px solid rgba(129, 216, 208, .28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .3);
    gap: 12px;
}

/* 로고 — 흰 실버 로고(600×118 가로형) · 카드 폭 420 안. */
.login_page .login_logo_img {
    max-width: 300px;
    margin: 0 auto 14px;
}

/* 입력 — 다크. */
.login_page .login_in {
    height: 50px;
    padding: 0 16px;
    background: #12181a;
    border: 1px solid #2a3538;
    border-radius: 10px;
    color: #e8edf2;
    font-size: 15px;
}

.login_page .login_in::placeholder { color: #6f7d80; }

.login_page .login_in:focus {
    border-color: #81d8d0;
    background: #151d1f;
    box-shadow: 0 0 0 3px rgba(129, 216, 208, .18);
}

/* 보안문자 박스 — 입력과 같은 톤(SVG 가독 위해 속만 살짝 밝게). */
.login_page .login_cap_box {
    height: 50px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid #2a3538;
    border-radius: 10px;
}

.login_page .login_hint { color: #7d8b8e; }

/* 로그인 버튼 — pill · 티파니 민트 그라디언트 + 진한 글씨(검정 카드 위 주 버튼). */
.login_page .login_btn_primary {
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b2ebe6 0%, #81d8d0 50%, #4fb3aa 100%);
    color: #06201d;
    font-size: 17px;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.login_page .login_btn_primary:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

/* 회원가입/USDT — 다크 바탕 + 민트 라인·민트 글씨(pill — primary 와 곡률 통일). */
.login_page .login_btn_sub {
    background: #12181a;
    border: 1px solid rgba(129, 216, 208, .45);
    border-radius: 999px;
    color: #b2ebe6;
}

.login_page .login_btn_sub:hover:not(:disabled) {
    background: rgba(129, 216, 208, .12);
    color: #e6fbf9;
    filter: none;
}

/* 소셜 — 버튼형(SVG+문구 폴백). 입력과 같은 다크 + 채널 브랜드 아이콘색. */
.login_page .app-social-buttons { gap: 8px; margin-top: 4px; }

.login_page .app-social-btn {
    /* 🔴 flex 리셋 — 스코프 CSS(SocialContactButtons.razor.css)의 `flex:1`(=basis 0%)이
       세로(column) 컨테이너에서 height 를 무시하게 만든다 — basis 를 auto 로 되돌려 height 가 서게 한다. */
    flex: 0 0 auto;
    height: 46px;
    background: #12181a;
    border: 1px solid #2a3538;
    border-radius: 999px;
    color: #d5dde0;
}

.login_page .app-social-btn:hover {
    background: rgba(129, 216, 208, .1);
    border-color: rgba(129, 216, 208, .45);
    filter: none;
}

.login_page .app-social-telegram svg { color: #2aa8e0; }
.login_page .app-social-kakao svg { color: #f7e04b; }

/* 비밀번호 눈 토글 — 다크 입력칸 위 톤 고정. */
.login_page .pwi_eye { color: #6f7d80; }
.login_page .pwi_eye:hover { color: #81d8d0; }

/* 배너 이미지 기본형 — **전역**(BUILD-87 A 권장 규격 width:100%). 이 컴포넌트는 LoginModal 도
   함께 쓰므로(실측) .login_page 스코프에 가두면 모달에서 원본 300px 가 그대로 튀어나온다. */
.app-social-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===========================================================
 * 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); }