/* =========================================================
   SJ Hub — login.css
   로그인 화면 전용 스타일 (login.php 인라인 분리)
   ========================================================= */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Noto Sans KR',-apple-system,sans-serif;
    background: linear-gradient(135deg, #2a2f3a 0%, #1a1f2e 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; position: relative;
    -webkit-font-smoothing: antialiased;
}

/* 배경 그리드 */
body::before {
    content: ''; position: fixed; inset: 0;
    background-image:
        linear-gradient(to right,  rgba(0,168,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,168,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events: none; z-index: 0;
}

/* 배경 워터마크 */
body::after {
    content: 'RESTRICTED'; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 12.857rem; font-weight: 900;
    color: rgba(255,255,255,0.012);
    letter-spacing: 20px; pointer-events: none; z-index: 0;
    white-space: nowrap; user-select: none;
}

/* 상단 시계 */
.sys-clock { position: fixed; top: 20px; right: 24px; text-align: right; z-index: 10; }
.sys-clock-time {
    font-size: 1.714rem; font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 1.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.sys-clock-date {
    font-size: 0.786rem; font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1.2px; margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* 보안 뱃지 */
.sec-badge {
    position: fixed; top: 22px; left: 24px; z-index: 10;
    display: flex; align-items: center; gap: 8px;
}
.sec-dot {
    width: 7px; height: 7px;
    background: #00a8ff; border-radius: 50%;
    animation: blink 2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.sec-text {
    font-size: 0.786rem; font-weight: 700;
    color: rgba(255,255,255,0.45);
    letter-spacing: 2px; text-transform: uppercase;
}

/* 버전 표기 */
.sys-version {
    position: fixed; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.714rem; font-weight: 600;
    color: rgba(255,255,255,0.22);
    letter-spacing: 2px; z-index: 10; white-space: nowrap;
}

/* 메인 컨테이너 */
.login-container {
    position: relative; z-index: 1;
    width: 100%; max-width: 1200px;
    background: #f5f7fa;
    box-shadow: 0 32px 80px rgba(0,0,0,0.65);
    overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 620px;
}

/* ── 좌: 브랜드 섹션 ── */
.brand-section {
    background: linear-gradient(135deg, #09111e 0%, #051a3a 100%);
    padding: 64px 56px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.brand-section::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events: none;
}
.brand-section::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #052f67 0%, #00a8ff 50%, #052f67 100%);
}
.brand-top { position: relative; z-index: 1; }

/* 상호 */
.company-name {
    font-size: 2.429rem; font-weight: 800;
    color: #fff; letter-spacing: -1px;
    line-height: 1.1; margin-bottom: 6px;
    white-space: nowrap; width: fit-content;
}
.company-ju { font-size: 0.78em; }

.company-name-en {
    font-size: 1.107rem; font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
    white-space: nowrap; width: fit-content;
}

.brand-divider {
    height: 2px;
    background: linear-gradient(90deg, #00a8ff 0%, rgba(0,168,255,0.15) 70%, transparent 100%);
    margin-bottom: 24px;
}

.company-slogan {
    font-size: 0.964rem; font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.2px; margin-bottom: 20px;
    line-height: 1.5;
}

.staff-only {
    font-size: 0.929rem; font-weight: 600;
    color: rgba(255,255,255,0.4);
}

.brand-bottom { position: relative; z-index: 1; }

/* 보안 경고 박스 */
.security-warning {
    background: rgba(20,0,0,0.6);
    border: 1px solid rgba(200,50,50,0.35);
    border-left: 3px solid rgba(220,60,60,0.7);
    padding: 20px 22px;
}
.security-warning-title {
    font-size: 0.786rem; font-weight: 800;
    color: rgba(255,140,140,0.9);
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 7px;
}
.security-warning-title::before { content: '⚠'; font-size: 0.929rem; }
.security-warning-text {
    font-size: 0.893rem; font-weight: 400;
    color: rgba(255,255,255,0.7);
    line-height: 1.95; word-break: keep-all;
}
.security-warning-text strong {
    color: rgba(255,255,255,0.92); font-weight: 700;
}
.security-log-notice {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.786rem; font-weight: 600;
    color: rgba(0,168,255,0.6);
    display: flex; align-items: center; gap: 7px;
}
.log-dot {
    width: 5px; height: 5px;
    background: #00a8ff; border-radius: 50%;
    flex-shrink: 0; animation: blink 2s infinite;
}

/* ── 우: 로그인 섹션 ── */
.login-section {
    padding: 64px 68px;
    display: flex; flex-direction: column; justify-content: center;
    background: #fff;
}
.login-header { margin-bottom: 32px; }
.login-title {
    font-size: 1.714rem; font-weight: 800;
    color: #052f67; margin-bottom: 7px;
    letter-spacing: -0.5px;
}
.login-subtitle {
    font-size: 0.929rem; color: #aaa; font-weight: 500;
}

.error-box {
    border-left: 3px solid; padding: 13px 16px;
    font-size: 0.929rem; font-weight: 600;
    margin-bottom: 22px;
}
.error-box.is-warning {
    background: #fff8e1; border-color: #f59e0b; color: #92400e;
}
.error-box.is-error {
    background: #fff5f5; border-color: #ef4444; color: #991b1b;
}

.login-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-label { font-size: 0.857rem; font-weight: 700; color: #555; }
.form-input {
    padding: 13px 15px; border: 1px solid #dde3ec;
    font-family: inherit; font-size: 1rem; font-weight: 500;
    color: #111; transition: all 0.2s; background: #fff; outline: none;
}
.form-input:focus {
    border-color: #00a8ff;
    box-shadow: 0 0 0 3px rgba(0,168,255,0.08);
}
.form-input.is-error {
    border-color: #ef4444; background: #fff5f5;
}
.submit-btn {
    padding: 15px; background: #052f67; border: none;
    color: #fff; font-family: inherit;
    font-size: 1.071rem; font-weight: 800;
    cursor: pointer; transition: all 0.25s;
    margin-top: 8px; letter-spacing: 0.5px;
}
.submit-btn:hover:not(:disabled) {
    background: #00a8ff; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,168,255,0.25);
}
.submit-btn:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none;
}

.login-footer {
    margin-top: 28px; padding-top: 18px;
    border-top: 1px solid #eee;
    font-size: 0.786rem; color: #bbb; line-height: 1.9;
}

/* 반응형 */
@media (max-width: 820px) {
    .login-container { grid-template-columns: 1fr; min-height: auto; }
    .brand-section  { padding: 40px 28px; }
    .login-section  { padding: 40px 28px; }
    .sys-clock-time { font-size: 1.286rem; }
    body::after     { font-size: 4.286rem; }
}

/* 접근성 — 포커스 링 */
:focus-visible {
    outline: 2px solid #00a8ff;
    outline-offset: 2px;
}