/* ABA 제품군 공통 로그인 테마 (2026-10-21 요니 "로그인 화면(우리 제품 라인업 모두) 첨부 이미지를 활용하자, 일관성을 위해")
   쓰는 법: <body class="aba-login"> 안에 .aba-hero(왼쪽 소개) + .aba-card(오른쪽 카드). 제품마다 바꾸는 것은 제품 이름·문구뿐.
   배경 이미지는 --aba-art 로 지정(없으면 아래 그라디언트). 이미지 파일을 받으면 :root{--aba-art:url(/static/login/art.jpg)} 한 줄만 바꾸면 됨. */
:root {
  --aba-bg-1: #050d22; --aba-bg-2: #0a1d48; --aba-bg-3: #0d2a66;
  --aba-ink: #e9f1ff; --aba-ink-2: #a9bddf; --aba-muted: #7f95bd;
  --aba-line: rgba(122, 164, 255, .28);
  --aba-card: rgba(9, 22, 56, .74);
  --aba-field: rgba(5, 14, 38, .85);
  --aba-accent: #2f7bff; --aba-accent-2: #1b54d6; --aba-cyan: #5cc8ff;
  --aba-danger: #ff8f8f;
  --aba-art: none;
}
* { box-sizing: border-box; }
body.aba-login {
  margin: 0; min-height: 100vh; color: var(--aba-ink);
  font-family: "Pretendard", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  background:
    var(--aba-art) center / cover no-repeat,
    radial-gradient(900px 600px at 30% 52%, rgba(47, 123, 255, .34), transparent 62%),
    radial-gradient(700px 500px at 88% 20%, rgba(92, 200, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--aba-bg-1), var(--aba-bg-2) 55%, var(--aba-bg-3));
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 460px); align-items: center; gap: 40px;
  padding: 32px clamp(20px, 5vw, 80px);
}
.aba-hero { display: grid; gap: 22px; align-content: center; min-width: 0; }
.aba-hero .mark { font-size: clamp(40px, 5.4vw, 74px); font-weight: 800; letter-spacing: .06em; line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(92, 160, 255, .55); }
.aba-hero .mark small { display: block; margin-top: 10px; font-size: .27em; letter-spacing: .5em; color: var(--aba-cyan); font-weight: 600; }
.aba-hero .tag { font-size: clamp(18px, 2vw, 26px); color: var(--aba-ink-2); line-height: 1.5; max-width: 30ch; }
.aba-hero .tag b { color: var(--aba-cyan); font-weight: 700; }
.aba-hero .art { width: min(520px, 100%); opacity: .95; filter: drop-shadow(0 0 40px rgba(60, 130, 255, .45)); }
.aba-hero .trust { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 4px; font-size: 12px; letter-spacing: .18em; color: var(--aba-muted); }
.aba-hero .trust span::before { content: "◆"; margin-right: 8px; color: var(--aba-accent); font-size: 9px; }

.aba-card {
  width: 100%; padding: 30px 28px 24px; border-radius: 16px; border: 1px solid var(--aba-line);
  background: var(--aba-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.aba-card .head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.aba-card .lock { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--aba-line); background: rgba(47, 123, 255, .18); }
.aba-card .lock svg { width: 24px; height: 24px; fill: none; stroke: var(--aba-cyan); stroke-width: 1.8; }
.aba-card h1 { margin: 0; font-size: 21px; font-weight: 700; color: #fff; }
.aba-card .sub { margin: 3px 0 0; font-size: 13px; color: var(--aba-muted); }
.aba-card label { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--aba-ink-2); }
.aba-card label small { font-weight: 400; color: var(--aba-muted); font-size: 12px; }
.aba-card input[type=text], .aba-card input[type=email], .aba-card input[type=password] {
  width: 100%; height: 46px; padding: 0 14px; font-size: 15px; color: var(--aba-ink); background: var(--aba-field);
  border: 1px solid var(--aba-line); border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.aba-card input::placeholder { color: #5f759f; }
.aba-card input:focus { border-color: var(--aba-accent); box-shadow: 0 0 0 3px rgba(47, 123, 255, .28); }
.aba-card .pwbox { position: relative; display: block; }
.aba-card .pwbox input { padding-right: 70px; }
.aba-card .eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--aba-line); background: rgba(255, 255, 255, .05); color: var(--aba-ink-2); font-size: 12px; cursor: pointer; }
.aba-card .eye:hover { color: #fff; border-color: var(--aba-accent); }
.aba-card .keep { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; font-size: 13px; font-weight: 500; color: var(--aba-ink-2); }
.aba-card .keep input { width: 18px; height: 18px; accent-color: var(--aba-accent); }
.aba-card .go {
  width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .04em;
  background: linear-gradient(180deg, var(--aba-accent), var(--aba-accent-2)); box-shadow: 0 8px 24px rgba(47, 123, 255, .38);
}
.aba-card .go:hover { filter: brightness(1.1); }
.aba-card .go:focus-visible, .aba-card .ghost:focus-visible { outline: 3px solid rgba(92, 200, 255, .6); outline-offset: 2px; }
.aba-card .ghost { width: 100%; height: 42px; margin-top: 10px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--aba-ink-2);
  border: 1px solid var(--aba-line); background: rgba(255, 255, 255, .04); }
.aba-card .ghost:hover { color: #fff; border-color: var(--aba-accent); }
.aba-card .msg { min-height: 20px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--aba-danger); }
.aba-card .help { margin-top: 8px; padding: 13px; border-radius: 10px; border: 1px solid var(--aba-line); background: rgba(255, 255, 255, .04); }
.aba-card .help p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--aba-ink-2); }
.aba-card .help .ghost { margin: 0; height: 38px; }
.aba-card .apply { margin-top: 16px; text-align: center; font-size: 13px; color: var(--aba-muted); }
.aba-card .apply a { color: var(--aba-cyan); font-weight: 700; text-decoration: none; }
.aba-card .apply a:hover { text-decoration: underline; }
.aba-card [hidden], .aba-login [hidden] { display: none !important; }
.aba-foot { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--aba-muted); letter-spacing: .08em; }

@media (max-width: 900px) {
  body.aba-login { grid-template-columns: 1fr; gap: 22px; padding: 20px 16px; align-content: center; }
  .aba-hero { justify-items: center; text-align: center; }
  .aba-hero .art, .aba-hero .trust { display: none; }
  .aba-hero .mark { font-size: 40px; }
  .aba-hero .tag { font-size: 16px; max-width: none; }
}

/* ── 그림(art) 모드: 제품군 공통 키비주얼(ABA PRISM)을 배경으로 쓰고 로그인 카드만 얹는다 (2026-10-21 요니) ──
   body 에 class="with-art" 와 :root{--aba-art:url(...)} 만 주면 됨. 그림이 소개 역할을 하므로 .aba-hero 는 숨긴다. */
body.aba-login.with-art {
  background:
    linear-gradient(90deg, rgba(3, 8, 24, 0) 0%, rgba(3, 8, 24, 0) 62%, rgba(3, 8, 24, .38) 100%),
    var(--aba-art) left center / cover no-repeat,
    #040a1c;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  align-items: end;
  padding-bottom: clamp(18px, 5vh, 56px);
}
body.aba-login.with-art .aba-hero { display: none; }
body.aba-login.with-art main { grid-column: 2; }
body.aba-login.with-art .aba-foot { grid-column: 1 / -1; text-shadow: 0 1px 6px #000; }
@media (max-width: 900px) {
  body.aba-login.with-art {
    background:
      linear-gradient(rgba(3, 8, 24, .70), rgba(3, 8, 24, .84)),
      var(--aba-art) center / cover no-repeat,
      #040a1c;
    grid-template-columns: 1fr; align-items: center; padding-bottom: 20px;
  }
  body.aba-login.with-art main { grid-column: 1; }
}

/* 그림 모드 다듬기(2026-10-21): 카드를 그림이 원래 카드를 둔 자리(오른쪽 아래)에 붙이고, 그림 속 문구와 겹치는 푸터는 숨김, 카드는 조금 작게 */
body.aba-login.with-art { grid-template-rows: 1fr; padding-bottom: clamp(16px, 3.5vh, 40px); }
body.aba-login.with-art .aba-foot { display: none; }
body.aba-login.with-art .aba-card { padding: 20px 24px 16px; }
body.aba-login.with-art .aba-card .head { margin-bottom: 12px; }
body.aba-login.with-art .aba-card .lock { width: 40px; height: 40px; }
body.aba-login.with-art .aba-card h1 { font-size: 19px; }
body.aba-login.with-art .aba-card label { gap: 4px; margin-bottom: 9px; font-size: 12.5px; }
body.aba-login.with-art .aba-card input[type=text], body.aba-login.with-art .aba-card input[type=email], body.aba-login.with-art .aba-card input[type=password] { height: 41px; font-size: 14.5px; }
body.aba-login.with-art .aba-card .keep { margin: 2px 0 10px; }
body.aba-login.with-art .aba-card .go { height: 44px; font-size: 15px; }
body.aba-login.with-art .aba-card .msg { min-height: 16px; margin-top: 8px; }
body.aba-login.with-art .aba-card .apply { margin-top: 10px; }
@media (max-width: 900px) { body.aba-login.with-art { grid-template-rows: auto; } }