/* ============================================================================
   login.css
   로그인 스플릿 — (좌) 깊은 골드 브랜드 무대 + 흰 워드마크,
   (우) canvas 폼 면(아이디 · 비밀번호 · 관리자 로그인 + 구분선 + 카피라이트).
   전 색을 토큰(.hso)의 var(--*)에서만 소비(raw 색상 0건). 브랜드 = Gold.
   .hso 스코프는 루트(body.login-page.hso)가 제공하므로 var(--*)가 해석된다.

   무대: --gold/--gold-700(테마 무관 동일 정의)라 라이트/다크 모두 일정한 깊은 골드.
   버튼·포커스: --primary/--focus/--sel-bg(제품 UI 액션 = Gold).

   폰트·리셋·autofill 보정은 이 파일이 자족적으로 소유(shell.css 불필요).
   토큰은 tokens.css가 정의 → login.html에서 tokens.css + login.css 둘 다 링크.
   ============================================================================ */

/* Pretendard self-host. tokens.css는 패밀리만 지정하므로 @font-face는 화면이 등록. */
@font-face {
  font-family: 'Pretendard Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('/static/fonts/pretendard/PretendardVariable.woff2') format('woff2');
}

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

body.login-page {
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

/* ── 무대(2분할): 좌 브랜드 면 / 우 폼 면(50:50). ── */
.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── 좌: 깊은 골드 무대. radial로 상단 좌중앙에 살짝 밝은 골드 하이라이트(빛 방향 암시). ── */
.login-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: radial-gradient(125% 125% at 32% 22%, var(--gold-700), var(--gold) 62%);
  overflow: hidden;
}

/* 워드마크 히어로: logo-hso.png를 흰색 마스크로. contain이라 비율 왜곡 없음. */
.login-stage-mark {
  display: block;
  width: 300px;
  height: 58px;
  background-color: var(--text-inv);
  -webkit-mask: url('/static/images/logo-hso.png') no-repeat center;
  mask: url('/static/images/logo-hso.png') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── 우: 폼 면(중앙 정렬) ── */
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
  background: var(--canvas);
}

.login-form-wrap { width: 100%; max-width: 360px; }

/* 폼 위 컴팩트 로고: 데스크탑은 숨김(좌 무대가 브랜드 담당), 모바일에서만 노출. */
.login-mark-compact {
  display: none;
  width: 168px;
  height: 33px;
  margin: 0 0 28px;
  background-color: var(--text);
  -webkit-mask: url('/static/images/logo-hso.png') no-repeat left center;
  mask: url('/static/images/logo-hso.png') no-repeat left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── 폼 ── */
.login-form .field { margin-bottom: 18px; }

/* 라벨: 옅은 회색 + semibold(한글이라 트래킹 캡스 없음). */
.login-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
}

/* 입력창: 흰 surface + 라운드 + 넉넉한 높이. 포커스 시 골드 링(--focus/--sel-bg). */
.login-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  letter-spacing: var(--track-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-form input::placeholder { color: var(--text-3); }
.login-form input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--sel-bg);
}

/* autofill: 브라우저 강제 노란 배경 차단, 토큰 색 유지. */
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--surface) inset;
  caret-color: var(--text);
}

/* 에러: semantic --bad 토큰. 기본 숨김(hidden 속성). */
.login-error {
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  border-radius: var(--r);
  background: var(--bad-bg);
  color: var(--bad);
  font-size: var(--fs-sm);
}
.login-error[hidden] { display: none; }

/* 버튼: 관리자 로그인 = Primary(Gold) 면, 흰 글씨, full-width, 라운드. */
.login-submit {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--primary);
  color: var(--text-inv);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--track-body);
  cursor: pointer;
  transition: background-color .15s ease;
}
.login-submit:hover  { background: var(--primary-hover); }
.login-submit:active { background: var(--primary-active); }

/* ── 푸터: 구분선 + 카피라이트(폼과 같은 축, 좌측 정렬) ── */
.login-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-meta);
  color: var(--text-3);
}

/* ── 반응형: 좁아지면 무대 접고 폼만. 폼 위 컴팩트 로고로 브랜드 유지. ── */
@media (max-width: 760px) {
  .login-split { grid-template-columns: 1fr; }
  .login-stage { display: none; }
  .login-panel { padding: 48px 24px; align-items: flex-start; padding-top: 64px; }
  .login-mark-compact { display: block; }
}