* {
    box-sizing: border-box;
}

body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    background:
        radial-gradient(1100px circle at 12% 15%, rgba(34, 140, 212, .12), transparent 60%),
        radial-gradient(900px circle at 88% 85%, rgba(18, 63, 120, .10), transparent 60%),
        linear-gradient(160deg, #f4f7fb 0%, #edf2f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
}

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

.login-card {
    display: flex;
    width: 920px;
    max-width: 100%;
    min-height: 580px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(20, 41, 63, .14);
    overflow: hidden;
    border-radius: 20px;
    animation: cardFadeIn .5s ease both;
}

/* 왼쪽 브랜드 패널 */
.login-brand {
    position: relative;
    flex: 0 0 44%;
    overflow: hidden;
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

@keyframes bgGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.06); }
}

.login-brand-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    animation: bgGlow 6s ease-in-out infinite;
}

.login-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 34, 73, .68) 0%, rgba(12, 34, 73, .34) 65%, rgba(12, 34, 73, .08) 100%);
    z-index: 1;
    pointer-events: none;
}

.login-brand > *:not(.login-brand-bg) {
    position: relative;
    z-index: 2;
}

.brand-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.brand-logo-row .ailab-text-logo {
    height: 38px;
    width: auto;
}

.brand-logo-row .ailab-text-logo .ai-part {
    fill: #228cd4;
}

.brand-logo-row .ailab-text-logo .lab-part {
    fill: #ffffff;
}

.brand-logo-row .ailab-text-logo .kr-part {
    fill: #228cd4;
}

.brand-hero {
    margin: 32px 0 auto;
}

.hero-dash {
    display: block;
    width: 28px;
    height: 2px;
    background: #ffffff;
    margin-bottom: 16px;
}

.hero-title {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: #ffffff;
}

.brand-tagline {
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: #b9c8da;
    margin: 0;
}

.brand-sub {
    margin: 0 0 14px;
}

.brand-sub-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.brand-sub-desc {
    margin: 4px 0 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9fb3ca;
}

.brand-footer {
    margin: 0;
    font-size: 12px;
    color: #7c8ba0;
}

/* 오른쪽 폼 영역 */
.login-form-area {
    flex: 1;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fbfcfd;
}

.login-form-inner {
    width: 100%;
    max-width: 360px;
    margin: 30px auto 0;
}

.form-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #7a8699;
}

.form-title {
    margin: 4px 0 12px -2px;
    font-size: 32px;
    font-weight: 700;
    color: #1a2330;
}

.form-subtitle {
    margin: 0 0 32px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* 로그인 실패/성공 메시지 (loginCheck.do 응답 표시) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.login-error,
.login-success {
    display: none;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin: 0 0 16px;
}

.login-error.show,
.login-success.show {
    display: flex;
}

.login-error {
    background: #fdf1f0;
    border: 1px solid #f3c6c2;
    color: #d93025;
    animation: shake .4s ease;
}

.login-success {
    background: #e8f8ef;
    border: 1px solid #bfe8cf;
    color: #16a34a;
}

.field {
    margin-bottom: 20px;
}

.login-form-area label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.field-label-row label {
    margin-bottom: 0;
}

.password-help-row {
    text-align: center;
    margin-top: 16px;
}

.password-help-link {
    font-size: 13px;
    color: #9aa3af;
    text-decoration: none;
}

.password-help-link:hover {
    color: #228cd4;
    text-decoration: underline;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 13px;
    display: flex;
    color: #9aa3af;
    pointer-events: none;
}

.login-form-area input[type="text"],
.login-form-area input[type="password"] {
    width: 100%;
    padding: 15px 14px 15px 42px;
    border: 1px solid #b9c1c9;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-form-area input[type="text"]:focus,
.login-form-area input[type="password"]:focus {
    outline: none;
    border-color: #6fa8d8;
    background: #fff;
    box-shadow: 0 0 8px 1px rgba(34, 140, 212, .10);
}

.login-form-area input.error {
    border-color: #d93025;
}

/* 비밀번호 변경 요청 화면 전용 - 아이콘이 없는 입력칸이므로 아이콘용 left padding을 적용하지 않는다.
   공통 로그인 input 스타일(.login-form-area input[...])은 그대로 두고 padding만 이 selector로 덮어쓴다. */
.no-icon-form input[type="text"] {
    padding: 15px 16px;
}

/* 아이콘 영역(.input-icon 등)이 존재하는 경우를 대비한 방어적 처리 - 현재는 해당 요소가 없어 실질 효과는 없음 */
.no-icon-form .input-wrap::before,
.no-icon-form .input-icon {
    display: none;
}

.no-icon-form textarea {
    width: 100%;
    min-height: 72px;
    padding: 12px 16px;
    border: 1px solid #b9c1c9;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.no-icon-form textarea:focus {
    outline: none;
    border-color: #6fa8d8;
    box-shadow: 0 0 8px 1px rgba(34, 140, 212, .10);
}

/* 비밀번호 변경 요청 화면 전용 - 로그인으로 돌아가기 링크 (다른 화면에는 영향 없음) */
.back-to-login-row {
    margin-top: 16px;
    text-align: center;
}

.back-to-login-link {
    font-size: 14px;
    color: #6b7280;
    text-decoration: none;
}

.back-to-login-link:hover {
    color: #163a63;
    text-decoration: underline;
}

.form-row {
    margin-bottom: 28px;
}

.remember-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}

.remember-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #228cd4;
}

.login-form-area button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #163a63 0%, #1e4f91 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.login-form-area button:hover:not(:disabled) {
    background: linear-gradient(135deg, #123055 0%, #2a6bc0 100%);
    box-shadow: 0 12px 28px rgba(18, 63, 120, .36);
}

.login-form-area button:active:not(:disabled) {
    transform: scale(.98);
}

.login-form-area button:disabled {
    opacity: .7;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .login-card {
        flex-direction: column;
        min-height: 0;
    }
    .login-brand {
        flex: none;
        padding: 28px;
    }
    .brand-hero {
        display: none;
    }
    .login-form-area {
        padding: 32px 28px 40px;
    }
}