/* login.html 의 인라인 <style> 을 옮긴 파일(CSP 인라인 스타일 단계 T1 : <style> 요소를 막기 위해).
   같은 자리에서 불러오므로 적용 순서는 옮기기 전과 같다. */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-primary);
            background-color: var(--gray-25);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
            color: var(--brand-secondary);
        }

        /* Seamless Flow Background */
        .background-wrap {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(160deg, #ffffff 0%, #f8f9fa 40%, #f3f4f6 100%);
            overflow: hidden;
            transition: background var(--transition-mid);
        }

        .background-wrap::before {
            content: '';
            position: absolute;
            top: -10%;
            left: -5%;
            right: -5%;
            bottom: -10%;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 560' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23d1d5db' stroke-width='2' opacity='0.08' d='M-100,280 C100,200 200,340 400,280 C600,220 700,320 900,260 C1100,200 1200,300 1440,240'/%3E%3Cpath fill='none' stroke='%23d1d5db' stroke-width='1.2' opacity='0.06' d='M-100,320 C100,240 250,380 450,310 C650,240 750,350 950,285 C1150,220 1280,330 1540,270'/%3E%3Cpath fill='none' stroke='%23d1d5db' stroke-width='0.8' opacity='0.05' d='M-100,360 C150,290 300,400 500,335 C700,270 800,375 1000,310 C1200,245 1320,355 1540,295'/%3E%3Cpath fill='none' stroke='%23e9eaee' stroke-width='1.5' opacity='0.5' d='M-100,180 C150,130 300,230 500,170 C700,110 800,210 1000,155 C1200,100 1320,195 1540,140'/%3E%3Cpath fill='none' stroke='%23e9eaee' stroke-width='1' opacity='0.35' d='M-100,420 C200,360 350,450 580,390 C810,330 900,420 1100,370 C1300,320 1420,400 1540,355'/%3E%3C/svg%3E");
            background-size: 100% 100%;
            animation: flowWave 20s ease-in-out infinite alternate;
        }

        .background-wrap::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background:
                radial-gradient(ellipse 80% 60% at 20% 100%, rgba(224,40,47,0.04) 0%, transparent 70%),
                radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0,177,168,0.03) 0%, transparent 70%);
        }

        @keyframes flowWave {
            0%   { transform: translateX(0) translateY(0) scaleX(1); }
            50%  { transform: translateX(1%) translateY(-0.5%) scaleX(1.005); }
            100% { transform: translateX(-1%) translateY(0.5%) scaleX(0.995); }
        }

        .login-container {
            width: 100%;
            max-width: 480px;
            padding: 20px;
            z-index: 10;
        }

        /* Premium Light Card */
        .login-card {
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-xl);
            padding: 64px 56px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
            animation: cardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes cardEntrance {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .header {
            text-align: center;
            margin-bottom: 48px;
        }

        /* Branding: Brand (Red) + IaCGen (Black) */
        .logo-box {
            font-family: var(--font-heading);
            font-size: 36px;
            font-weight: 800;
            color: var(--brand-secondary);
            letter-spacing: -1.5px;
            margin-bottom: 8px;
        }

        .logo-box span {
            color: var(--brand-primary);
        }

        .subtitle {
            color: var(--gray-500);
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.2px;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            color: var(--gray-600);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        /* Clean Light Inputs */
        .form-input {
            width: 100%;
            height: 52px;
            padding: 0 20px;
            background: var(--gray-25);
            border: 1.5px solid var(--gray-100);
            border-radius: var(--radius-md);
            color: var(--brand-secondary);
            font-size: 15px;
            font-family: var(--font-primary);
            transition: all var(--transition-fast);
        }

        .form-input::placeholder {
            color: var(--gray-300);
        }

        .form-input:focus {
            outline: none;
            background: var(--white);
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 4px rgba(224, 40, 47, 0.1);
        }

        /* Primary Red Button (brand red accent) */
        .btn-login {
            width: 100%;
            height: 48px;
            background: var(--brand-primary);
            color: var(--white);
            border: none;
            border-radius: var(--radius-md);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 12px;
            box-shadow: 0 4px 12px rgba(224, 40, 47, 0.15);
        }

        .btn-login:hover {
            background: var(--brand-primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(224, 40, 47, 0.2);
        }

        .btn-login:focus-visible {
            outline: 3px solid var(--brand-secondary);
            outline-offset: 2px;
        }

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

        .btn-login:disabled {
            background: var(--gray-300);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .error-message {
            color: var(--brand-primary);
            font-size: 13px;
            margin-top: 20px;
            text-align: center;
            min-height: 20px;
            font-weight: 500;
        }

        .footer {
            margin-top: 48px;
            text-align: center;
            border-top: 1px solid var(--gray-100);
            padding-top: 24px;
        }

        .footer p {
            font-size: 12px;
            color: var(--gray-400);
            line-height: 1.6;
            font-weight: 500;
        }

        /* Spinner for loading state */
        .spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: var(--white);
            animation: spin 0.8s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .btn-content.loading span { display: none; }
        .btn-content.loading .spinner { display: block; }

        /* HIDE_COBRAND(AKS 전용)에서 코브랜딩 로고 숨김 (branding.js가 <html>에 no-cobrand 부여) */
        html.no-cobrand [data-cobrand-logo] { display: none !important; }