/* ============================================================
   관리자 로그인 — 독립 스킨
   고객 화면(apply.css)의 "B" 시각 언어를 그대로 옮겼다.
   정본: design/login/*.dc.html (Main · Mobile · Setup)

   admin.css(애드폼 레퍼런스 스킨)와 섞지 않는다 — 로그인 화면은
   이 파일만 링크하고 admin.css 를 불러오지 않는다.
   ============================================================ */
:root{
  --ink:#14171C; --sub:#5A6272; --faint:#8D94A1;
  --line2:#D3D9E2;
  --brand:#1F4E9C; --brand-ink:#173C79; --brand-soft:#EDF2FB; --brand-line:#D6E2F5;
  --pane:#0A172E; --pane-glow:rgba(31,78,156,.5);
  --danger:#C4231E; --danger-bg:#FEF4F3; --danger-line:#F0BFBB; --danger-ink:#8E2420;
  --ring:rgba(31,78,156,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard,
              "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size:14px; line-height:1.5; color:var(--ink); background:var(--pane);
  -webkit-font-smoothing:antialiased;
}

/* ── 골격 ────────────────────────────────────── */
.lg{display:flex;min-height:100vh;min-height:100dvh}

/* ── 좌: 브랜드 판 ───────────────────────────── */
.lg-brand{
  position:relative; width:512px; flex-shrink:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:56px 52px; background:var(--pane);
}
/* 마크 뒤에 걸리는 빛 — 가운데로 모인 덩어리에 무게를 준다 */
.lg-brand::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(660px 520px at 6% 40%, var(--pane-glow), transparent 68%);
}
.lg-in{position:relative}
.lg-mark{
  display:flex; width:64px; height:64px; border-radius:17px; background:#fff;
  align-items:center; justify-content:center;
}
.lg-nm{margin:26px 0 0;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.03em}
.lg-desc{margin:9px 0 0;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.56);letter-spacing:-.012em}
.lg-rule{width:44px;height:1px;margin:32px 0 28px;background:rgba(255,255,255,.2)}
.lg-flow{display:flex;align-items:center;gap:11px}
.lg-flow span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.86);letter-spacing:-.01em}
.lg-flow i{width:18px;height:1px;background:rgba(255,255,255,.26)}
.lg-note{
  position:absolute; left:52px; right:52px; bottom:52px; margin:0;
  font-size:12px; line-height:1.8; color:rgba(255,255,255,.42); letter-spacing:-.01em;
}

/* ── 우: 폼 판 ───────────────────────────────── */
.lg-form{flex:1;display:flex;align-items:center;justify-content:center;padding:56px 64px;background:#fff}
.lg-card{width:100%;max-width:372px}
.lg-card h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.lg-lead{margin:9px 0 30px;font-size:13.5px;color:var(--faint);letter-spacing:-.012em}
.lg-lead.tight{margin-bottom:22px}

.lg-info{
  margin:0 0 28px; padding:13px 15px; border:1px solid var(--brand-line); border-radius:12px;
  background:var(--brand-soft); font-size:12.5px; line-height:1.7; color:#28497E; letter-spacing:-.012em;
}
.lg-err{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; padding:12px 14px;
  border:1px solid var(--danger-line); border-radius:12px; background:var(--danger-bg);
  font-size:13px; line-height:1.6; color:var(--danger-ink); letter-spacing:-.012em;
}
.lg-err svg{flex-shrink:0;margin-top:1px}

/* ── 필드 ────────────────────────────────────── */
.lg-f{margin-bottom:18px}
.lg-f label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--sub);letter-spacing:-.012em}
.lg-i{
  display:block; width:100%; height:52px; padding:0 15px;
  border:1px solid var(--line2); border-radius:12px; background:#fff;
  font-family:inherit; font-size:15px; color:var(--ink); letter-spacing:-.01em;
}
.lg-i::placeholder{color:#A9AFBA}
.lg-i:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.lg-pw{position:relative}
.lg-pw .lg-i{padding-right:68px}
.lg-eye{
  position:absolute; top:6px; right:6px; height:40px; padding:0 13px;
  border:0; border-radius:9px; background:transparent;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--brand);
  letter-spacing:-.01em; cursor:pointer;
}
.lg-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.lg-help{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint);letter-spacing:-.012em}

.lg-go{
  display:block; width:100%; height:54px; margin-top:26px;
  border:0; border-radius:12px; background:var(--brand); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.015em; cursor:pointer;
}
.lg-go:hover{background:var(--brand-ink)}
.lg-tail{margin:20px 0 0;font-size:12.5px;line-height:1.7;color:var(--faint);letter-spacing:-.012em;text-align:center}

/* ── 중간 폭 — 브랜드 판을 비율로 줄여 폼 쪽 여백을 지킨다 ── */
@media (max-width:1180px){
  .lg-brand{width:42%;padding:48px 40px}
  .lg-note{left:40px;right:40px;bottom:40px}
  .lg-form{padding:48px 40px}
}

/* ── 모바일 — 네이비 상단 블록 + 흰 시트 ─────── */
@media (max-width:860px){
  .lg{flex-direction:column}
  .lg-brand{width:auto;flex:0 0 auto;justify-content:flex-start;padding:34px 22px 48px}
  .lg-brand::before{background:radial-gradient(420px 300px at 18% 10%, var(--pane-glow), transparent 70%)}
  .lg-mark{width:44px;height:44px;border-radius:12px}
  .lg-mark svg{width:24px;height:24px}
  .lg-nm{margin-top:16px;font-size:19px}
  .lg-desc{font-size:13px}
  .lg-rule,.lg-flow{display:none}
  .lg-note{position:static;margin:18px 0 0;font-size:11.5px;line-height:1.75}

  .lg-form{
    flex:1 1 auto; align-items:flex-start; margin-top:-26px;
    padding:32px 22px 36px; border-radius:24px 24px 0 0;
  }
  .lg-card{max-width:none}
  /* 모바일 입력은 16px 미만이면 iOS 사파리가 화면을 확대한다 */
  .lg-i{height:54px;font-size:16px}
  .lg-go{height:56px;font-size:16px}
}