/**
 * Login Page Styles - Tabler Inspired Premium Design (옵션 B)
 *
 * 디자인 컨셉: 고급스럽고 부드러운 느낌
 * 참조: https://preview.tabler.io/sign-in.html
 * 작성일: 2025-11-02
 *
 * 핵심 원칙:
 * - Pretendard 폰트 사용 (--font-family-base)
 * - 섬세한 폰트 두께 조절
 * - 부드러운 색상 전환
 * - 여우 아이콘 + 텍스트 조합
 * - 프리미엄 느낌의 디테일
 */

/* ========================================
   Body & Container
   ======================================== */

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    background: var(--color-gray-50); /* 부드러운 회색 배경 */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased; /* 폰트 부드럽게 */
    -moz-osx-font-smoothing: grayscale;
}

.login-container {
    padding: var(--space-4);
    width: 100%;
    max-width: 450px; /* Semantic width - keep as px */
}

/* ========================================
   Login Card
   ======================================== */

.login-card {
    position: relative;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl); /* 더 부드러운 모서리 (12px) */
    box-shadow: none;
    border: var(--border-width-1) solid var(--color-gray-200); /* 매우 연한 경계선 */
    padding: var(--space-12); /* 48px - 넉넉한 패딩 */
    width: 100%;
    transition: box-shadow var(--duration-normal) ease;  /* 0.3s [TASK-024] */
    animation: fadeIn var(--duration-slow) ease-out;
}

.login-card:hover {
    box-shadow: none;
}

/* ========================================
   Login Header
   ======================================== */

.login-header {
    text-align: center;
    margin-bottom: var(--space-10); /* 40px */
}

.login-logo {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* FoxAdmin 로고 이미지 */
.logo-image {
    max-width: 200px;
    height: auto;
    transition: transform var(--duration-normal) ease, opacity var(--duration-normal) ease;
}

.logo-image:hover {
    transform: none;
    opacity: var(--opacity-95);
}

/* 라이트: logo2 보임, logo_w 숨김 / 다크: 반대 */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

.login-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

.login-subtitle {
    font-size: var(--font-size-15); /* 15px - Tabler 스타일 */
    font-weight: var(--font-weight-normal); /* Regular */
    color: var(--color-gray-600); /* 중간 회색 */
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* ========================================
   Form
   ======================================== */

.login-form {
    margin-bottom: var(--space-6); /* 24px */
}

.form-group {
    margin-bottom: var(--space-5); /* 20px */
}

.form-label {
    font-size: var(--font-size-base); /* 14px */
    font-weight: var(--font-weight-semibold); /* Semibold - 더 진하게 (500 → 600) */
    color: var(--color-gray-800); /* 더 진한 회색: gray-700 → gray-800 */
    margin-bottom: var(--space-2); /* 8px */
    display: block;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
}

.input-wrapper {
    position: relative;
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-15); /* 15px */
    font-weight: var(--font-weight-medium); /* Medium - 더 진하게 (400 → 500) */
    border: var(--border-width-1) solid var(--color-gray-400); /* 연한 회색 경계선 */
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast) var(--micro-ease);  /* 0.2s [TASK-024] */
    background: var(--color-bg-primary);
    color: var(--color-gray-900);
    line-height: var(--line-height-normal);
    box-sizing: border-box;
}

.form-control:hover {
    border-color: var(--color-gray-500); /* 호버 시 약간 진하게 */
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary-500); /* Professional Blue */
    box-shadow: var(--shadow-focus); /* 더 부드러운 포커스 */
    background: var(--color-bg-primary);
}

.form-control::placeholder {
    color: var(--color-gray-500); /* 연한 회색 */
    font-weight: var(--font-weight-normal); /* Regular - 더 잘 보이게 (300 → 400) */
}

/* Validation States */
.form-control.error {
    border-color: var(--color-danger-500); /* 빨간색 */
    background: var(--color-danger-50); /* 매우 연한 빨강 배경 */
}

.form-control.valid {
    border-color: var(--color-success-500); /* 초록색 */
    background: var(--color-success-50); /* 매우 연한 초록 배경 */
}

.error {
    color: var(--color-danger-500);
    font-size: var(--font-size-13); /* 13px */
    font-weight: var(--font-weight-normal);
    margin-top: var(--space-1-5); /* 6px */
    display: block;
    line-height: var(--line-height-snug);
}

/* ========================================
   Login Button
   ======================================== */

.btn-login {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-15); /* 15px */
    font-weight: var(--font-weight-semibold); /* Semibold - 더 진하게 (500 → 600) */
    color: var(--color-white);
    background: var(--color-primary-500); /* 단색 Professional Blue */
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--micro-ease);  /* 0.15s [TASK-024] */
    display: block;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
    box-shadow: none;
}

html:not([data-theme="dark"]) .btn-login {
    background: var(--color-primary-600);
}

.btn-login:hover {
    background: var(--color-primary-600); /* 더 진하게 */
    transform: none; /* 미묘한 움직임 */
    box-shadow: none; /* 더 깊은 그림자 */
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-login:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ========================================
   Login Footer
   ======================================== */

.login-footer {
    text-align: center;
    padding-top: var(--space-6); /* 24px */
    border-top: var(--border-width-1) solid var(--color-gray-300); /* 연한 회색 */
    margin-top: var(--space-6); /* 24px */
}

.copyright {
    font-size: var(--font-size-13); /* 13px */
    font-weight: var(--font-weight-normal); /* Regular */
    color: var(--color-gray-500); /* 연한 회색 */
    margin: 0;
    line-height: var(--line-height-normal);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .login-card {
        padding: var(--space-8); /* 32px - 모바일에서 패딩 조정 */
    }

    .logo-icon {
        width: var(--icon-size-48); /* Semantic size - keep as px */
        height: var(--icon-size-48);
    }

    .logo-text {
        font-size: var(--font-size-3xl); /* 24px */
    }

    .login-title {
        font-size: var(--font-size-3xl); /* 24px */
    }

    .login-subtitle {
        font-size: var(--font-size-base); /* 14px */
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: var(--space-5); /* 20px - 모바일 좌우 여백 확보 */
    }

    .login-card {
        padding: var(--space-6); /* 24px */
    }

    .logo-icon {
        width: var(--icon-size-40); /* Semantic size - keep as px */
        height: var(--icon-size-40);
    }

    .logo-text {
        font-size: var(--font-size-2xl); /* 20px */
    }

    .login-title {
        font-size: var(--font-size-2xl); /* 20px */
    }
}

/* ========================================
   Premium Touch (고급스러운 디테일)
   ======================================== */

/* 부드러운 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 모션 감소 선호 사용자 대응 */
@media (prefers-reduced-motion: reduce) {
    .login-card {
        animation: none;
    }
}

/* 더 부드러운 스크롤 */
* {
    scroll-behavior: smooth;
}

/* ========================================
   Theme Toggle Button (seller 스타일)
   ======================================== */

.login-theme-toggle {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: var(--border-width-1) solid var(--color-gray-200);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-gray-500);
    transition: background var(--duration-fast) var(--micro-ease), color var(--duration-fast) var(--micro-ease), border-color var(--duration-fast) var(--micro-ease);
}

.login-theme-toggle:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Light mode: show moon, hide sun */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

[data-theme="dark"] .login-theme-toggle {
    border-color: var(--color-border-primary);
    color: var(--color-text-tertiary);  /* T950: 다크 gray-400 저대비 → text-tertiary로 8:1+ */
}

[data-theme="dark"] .login-theme-toggle:hover {
    background: var(--color-surface-variant);
    color: var(--color-gray-200);
}

/* ========================================
   Dark Mode Support
   ======================================== */

[data-theme="dark"] body {
    background: var(--color-background);
}

/* 다크 모드 색상 계층: page background > card surface > input surface-variant */
[data-theme="dark"] .login-card {
    background: var(--color-surface);
    border-color: var(--color-border-primary);
    box-shadow: var(--shadow-card);
}


[data-theme="dark"] .login-card:hover {
    box-shadow: var(--shadow-elevated);
}

[data-theme="dark"] .form-label {
    color: var(--color-text-primary);
}

[data-theme="dark"] .form-control {
    background: var(--color-surface-variant);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
    -webkit-text-fill-color: var(--color-text-primary);  /* autofill 텍스트 색상 강제 */
}

/* Chrome/Edge autofill 다크모드 대응 */
[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface-variant) inset;
    transition: background-color 5000s ease-in-out 0s;
}

[data-theme="dark"] .form-control:hover {
    border-color: var(--color-gray-500);
}

[data-theme="dark"] .form-control:focus {
    background: var(--color-surface-variant);
    border-color: var(--color-primary-400);
    color: var(--color-text-heading);
    -webkit-text-fill-color: var(--color-text-heading);  /* autofill 대응 */
    box-shadow: var(--shadow-focus-primary);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .form-control.error {
    border-color: var(--color-danger-500);
    background: var(--color-status-danger-soft-bg);
    color: var(--color-text-primary);  /* 입력 텍스트 가독성 확보 */
}

[data-theme="dark"] .form-control.valid {
    border-color: var(--color-success-500);
    background: var(--color-status-success-soft-bg);
}

[data-theme="dark"] .btn-login {
    /* 로그인 페이지는 --ds-brand(dark-saas 토큰)를 로드하지 않아 다크에서
       --color-primary-500/600이 빈 값 → 배경 투명·버튼 소실. blue 프리미티브로 자체 완결. */
    background: var(--blue-600);
    color: var(--color-white);
    box-shadow: var(--ds-login-source-button-shadow);
}

[data-theme="dark"] .btn-login:hover {
    box-shadow: var(--ds-login-source-button-shadow-hover);
}

[data-theme="dark"] .login-footer {
    border-top-color: var(--color-border-primary);
}

[data-theme="dark"] .copyright {
    color: var(--color-text-tertiary);
}

/* [2026-04-19] 다크→라이트 토글 시 body 배경 transition interpolation 지연 버그 회피
   근거: viewport-propagated body 레이어에서 [data-theme="dark"] 직접 오버라이드 해제 후
         light-dark() 토큰 보간이 Chromium 에서 약 1.5초 지연되는 이슈 관찰.
         body 만 transition 제외해 snap-to-final 유도.
   영향: 로그인 페이지 한정 (login.css 는 login.php 에서만 로드). */
html.theme-transitioning body {
    transition: none;
}