/* =====================================================================
   KAI Platform · Unified Auth Shell  (auth-unified.css v1.0)
   ---------------------------------------------------------------------
   · 적용 대상: erp_s · kdv_s · aps_s 공통 (바이트 동일 복사 사용 — 수정 금지)
   · 적용 범위: 인증 계열 페이지 전용
       로그인 / 회원가입 / 비밀번호 재설정·변경 / 403
   · 자기완결형: 다른 CSS 없이 이 파일 하나로 동작 (Pretendard·bootstrap-icons 별도 로드)
   · 구조: body.auth > .lg-shell > .lg-brand(좌 브랜드) + .lg-form(우 폼)
   · 팔레트: kdv navy_v2_7 표준 (#2456C4 / #0D1B30 / #F3F5FA)
   · 인증 전용 규격: 입력 44px · 주 버튼 46px (콘텐츠 40px보다 한 단계 큼)
   ===================================================================== */

:root {
  --auth-font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --auth-mono: "JetBrains Mono", "SF Mono", Consolas, "D2Coding", monospace;

  --auth-bg:        #F3F5FA;
  --auth-panel:     #FFFFFF;
  --auth-line:      #DBE2EF;
  --auth-line-2:    #C3CFE3;
  --auth-ink:       #101E33;
  --auth-ink-2:     #44546F;
  --auth-ink-3:     #5D6E88;
  --auth-ink-4:     #8091AB;
  --auth-placeholder:#9AA7BC;

  --auth-primary:   #2456C4;
  --auth-primary-2: #1A44A0;
  --auth-grad:      linear-gradient(135deg, #2456C4 0%, #1A44A0 100%);
  --auth-glow:      rgba(36,86,196,.35);
  --auth-focus:     rgba(36,86,196,.16);
  --auth-danger:    #C43442;
  --auth-danger-tint:#FCE9EB;

  --auth-brand-bg:  #0D1B30;
  --auth-brand-ink: #C7D3E8;
  --auth-brand-dim: #7C8EAD;
  --auth-brand-line: rgba(255,255,255,.10);

  --auth-radius:    8px;
  --auth-radius-s:  6px;
  --auth-input-h:   44px;
  --auth-btn-h:     46px;
}

/* ── 베이스 ── */
body.auth {
  margin: 0; min-height: 100vh;
  font-family: var(--auth-font); font-size: 14px;
  color: var(--auth-ink); background: var(--auth-bg);
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}
body.auth *, body.auth *::before, body.auth *::after { box-sizing: border-box; }
body.auth a { color: inherit; text-decoration: none; }
body.auth button, body.auth input { font: inherit; color: inherit; letter-spacing: inherit; }
body.auth h1, body.auth h2, body.auth p { margin: 0; }
body.auth :focus-visible { outline: 2px solid var(--auth-primary); outline-offset: 2px; border-radius: 4px; }

/* ── 셸 ── */
.lg-shell { min-height: 100vh; display: flex; background: var(--auth-bg); }

/* ── 좌: 브랜드 패널 ── */
.lg-brand {
  flex: 1.1; min-width: 0;
  background:
    radial-gradient(900px 520px at 12% -10%, var(--auth-glow), transparent 60%),
    radial-gradient(700px 500px at 105% 110%, var(--auth-glow), transparent 55%),
    var(--auth-brand-bg);
  color: var(--auth-brand-ink);
  display: flex; flex-direction: column;
  padding: 46px 54px;
  position: relative; overflow: hidden;
}
.lg-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 70% at 30% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 30% 30%, #000 30%, transparent 100%);
}
.lg-brand > * { position: relative; z-index: 1; }
.lg-brand .head { display: flex; align-items: center; gap: 13px; }
.lg-brand .head .nm { color: #fff; font-weight: 800; font-size: 17px; }
.lg-brand .head .tag { font-size: 11.5px; color: var(--auth-brand-dim); font-family: var(--auth-mono); margin-top: 2px; }

.s-logo {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--auth-grad); color: #fff;
  font-weight: 900; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .02em; flex: 0 0 auto;
  box-shadow: 0 4px 12px var(--auth-glow);
}

.lg-brand .mid { margin: auto 0; padding: 48px 0; }
.lg-brand h1 {
  color: #fff; font-size: clamp(26px, 3vw, 36px);
  line-height: 1.28; letter-spacing: -.02em; font-weight: 800;
  max-width: 440px;
}
.lg-brand h1 em {
  font-style: normal; background: var(--auth-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: brightness(1.55) saturate(.8);
}
.lg-brand .sub { margin-top: 14px; font-size: 14px; color: var(--auth-brand-dim); max-width: 430px; line-height: 1.65; }

.lg-svc { margin-top: 34px; display: flex; flex-direction: column; gap: 2px; max-width: 440px; }
.lg-svc .row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--auth-brand-line);
}
.lg-svc .row:last-child { border-bottom: 0; }
.lg-svc .row i { width: 20px; text-align: center; font-size: 15px; color: var(--auth-brand-dim); }
.lg-svc .row .nm { font-weight: 700; font-size: 13.5px; color: var(--auth-brand-ink); }
.lg-svc .row .ds { font-size: 12px; color: var(--auth-brand-dim); margin-left: 2px; }
.lg-svc .row .live-dot { margin-left: auto; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2EE28D; display: inline-block;
  box-shadow: 0 0 0 3px rgba(46,226,141,.15);
  animation: auth-pulse 2.2s ease-in-out infinite;
}
@keyframes auth-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.lg-brand .foot {
  font-family: var(--auth-mono); font-size: 11px; color: var(--auth-brand-dim);
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ── 우: 폼 패널 ── */
.lg-form {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  background: var(--auth-panel);
}
.lg-box { width: 100%; max-width: 380px; }
.lg-box .ttl { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--auth-ink); }
.lg-box .dsc { margin-top: 7px; font-size: 13.5px; color: var(--auth-ink-3); }
.lg-box .stack { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }

/* 필드 */
.lg-box .form-field { display: flex; flex-direction: column; gap: 6px; }
.lg-box .form-field > label { font-size: 12.5px; font-weight: 650; color: var(--auth-ink-2); }
.lg-box .input,
.lg-box input[type="text"], .lg-box input[type="email"], .lg-box input[type="password"] {
  width: 100%; height: var(--auth-input-h);
  padding: 0 13px; background: var(--auth-panel);
  border: 1px solid var(--auth-line-2); border-radius: var(--auth-radius);
  font-size: 14px; transition: border-color .12s, box-shadow .12s;
}
.lg-box input::placeholder { color: var(--auth-placeholder); }
.lg-box input:focus {
  outline: none; border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px var(--auth-focus);
}

/* 옵션 행 (로그인 유지 · 재설정 링크) */
.lg-box .lg-options {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--auth-ink-3);
}
.lg-box .lg-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 550; }
.lg-box .lg-options input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--auth-primary); }
.lg-box .lg-options a { margin-left: auto; color: var(--auth-primary); font-weight: 650; }
.lg-box .lg-options a:hover { text-decoration: underline; }

/* 주 버튼 */
.lg-btn {
  width: 100%; height: var(--auth-btn-h);
  border-radius: var(--auth-radius); border: 0; cursor: pointer;
  background: var(--auth-grad); color: #fff;
  font-weight: 800; font-size: 14.5px; letter-spacing: .01em;
  box-shadow: 0 8px 22px var(--auth-glow);
  transition: filter .15s ease, transform .12s ease;
}
.lg-btn:hover { filter: brightness(1.06); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 보조 링크 · 카피라이트 */
.auth-links {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600;
}
.auth-links a { color: var(--auth-primary); }
.auth-links a:hover { text-decoration: underline; }
.lg-meta {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--auth-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lg-meta .cp { font-size: 11.5px; color: var(--auth-ink-4); font-family: var(--auth-mono); }

/* 에러 · 안내 */
.form-error {
  padding: 11px 14px; border-radius: var(--auth-radius-s);
  background: var(--auth-danger-tint); color: var(--auth-danger);
  font-size: 12.5px; font-weight: 650; line-height: 1.5;
}
.auth-status {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius); background: var(--auth-bg); line-height: 1.55;
}
.auth-status i { font-size: 20px; color: var(--auth-primary); }

/* ── 반응형 ── */
@media (max-width: 920px) {
  .lg-shell { flex-direction: column; }
  .lg-brand { flex: none; padding: 30px 24px 26px; }
  .lg-brand .mid { padding: 26px 0 4px; margin: 0; }
  .lg-svc, .lg-brand .foot { display: none; }
  .lg-form { padding: 34px 22px 46px; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body.auth *, body.auth *::before, body.auth *::after { transition: none !important; animation: none !important; }
}