/*
  u-ARC Smart Farm Web Admin - Login
  Source of truth: Claude Design "u-ARC Login Screen.dc.html" (project: Smart Farm Web Admin)
  1440x1024 디자인을 최대 크기로 유지하면서 작은 화면에 반응형으로 대응합니다.
*/

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: #e9ece6;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: flex;
}

a { color: #2f7d4c; text-decoration: none; }
a:hover { color: #011936; }

/*
  1440x1024 카드를 뷰포트보다 작을 때는 가운데 정렬하고,
  뷰포트가 카드보다 작아지면 flex auto-margin이 자연스럽게 무너지면서
  좌우/상하 스크롤로 카드 전체에 접근할 수 있게 합니다.
  (justify-content/align-items: center 대신 margin:auto를 쓰는 이유:
   overflow 상태에서 center 정렬이 시작 지점 스크롤을 막는 브라우저 버그를 피하기 위함)
*/
.uarc-login-viewport {
  margin: auto;
  width: min(1440px, 100%);
}

.uarc-login-card {
  width: 100%;
  min-height: min(1024px, 100vh);
  display: flex;
  background: #fbfcfa;
  overflow: hidden;
}

/* ---------- left panel ---------- */

.uarc-login-brand {
  width: 620px;
  flex-shrink: 0;
  position: relative;
  background-color: #011936;
  background-image: url('/asset/images/login-brand-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.uarc-login-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,25,54,.80) 0%, rgba(1,25,54,.52) 42%, rgba(1,25,54,.86) 100%);
  pointer-events: none;
}

.uarc-login-brand-top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 56px; }

.uarc-login-logo { height: 104px; width: auto; align-self: flex-start; }

.uarc-login-brand-copy { display: flex; flex-direction: column; gap: 14px; }

.uarc-login-headline {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.32;
  color: #ffffff;
  text-wrap: pretty;
}

.uarc-login-sub {
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  color: rgba(255,255,255,.62);
  max-width: 420px;
  text-wrap: pretty;
}

.uarc-login-brand-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.uarc-login-clock {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.uarc-login-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: 11.5px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .15s ease, border-color .15s ease;
}
.uarc-login-photo-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.uarc-login-photo-btn svg { flex-shrink: 0; }

/* ---------- right panel ---------- */

.uarc-login-form-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}

.uarc-login-form {
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.uarc-login-title-group { display: flex; flex-direction: column; gap: 8px; }
.uarc-login-title { font-weight: 700; font-size: 30px; line-height: 1.3; color: #0b1c30; margin: 0; }
.uarc-login-subtitle { font-weight: 400; font-size: 14px; line-height: 22px; color: #465362; }

.uarc-login-dev-notice {
  margin: -12px 0 0;
  padding: 10px 12px;
  border: 1px solid #f2c94c;
  border-radius: 6px;
  background: #fff9df;
  color: #6f5600;
  font-size: 13px;
  line-height: 1.5;
}

.uarc-login-fields { display: flex; flex-direction: column; gap: 20px; }
.uarc-field { display: flex; flex-direction: column; gap: 8px; }
.uarc-field-label { font-weight: 700; font-size: 14px; color: #0b1c30; }

.uarc-field-box {
  height: 52px;
  border-radius: 6px;
  border: 1px solid #eef1ee;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.uarc-field-box:focus-within { border-color: #9fc490; }

.uarc-field-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  color: #0b1c30;
  padding: 0;
}
.uarc-field-box input::placeholder { color: #a4abb8; }

.uarc-field-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uarc-field-toggle svg { display: block; }
.uarc-field-toggle .uarc-eye-off { display: none; }
.uarc-field-toggle.is-visible .uarc-eye-on { display: none; }
.uarc-field-toggle.is-visible .uarc-eye-off { display: block; }

.uarc-login-error {
  margin: -4px 0 0;
  color: #b42318;
  font-size: 13px;
  line-height: 1.5;
}

.uarc-login-submit:disabled,
.uarc-google-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.uarc-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.uarc-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.uarc-remember input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.uarc-remember-box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #c3ccc3;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uarc-remember input:checked + .uarc-remember-box {
  background: #9fc490;
  border-color: #9fc490;
}
.uarc-remember-box svg { display: none; width: 12px; height: 12px; }
.uarc-remember input:checked + .uarc-remember-box svg { display: block; }
.uarc-remember-text { font-weight: 400; font-size: 14px; color: #465362; }
.uarc-remember input:focus-visible + .uarc-remember-box { outline: 2px solid #011936; outline-offset: 2px; }

.uarc-forgot { font-weight: 500; font-size: 14px; color: #2f7d4c; }

.uarc-login-submit {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  height: 56px;
  border: 0;
  border-radius: 6px;
  background: #9fc490;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #011936;
  transition: background 120ms linear;
}
.uarc-login-submit:hover { background: #8fbb7d; }

.uarc-divider { display: flex; align-items: center; gap: 14px; }
.uarc-divider-line { flex: 1; height: 1px; background: #eef1ee; }
.uarc-divider-text { font-weight: 400; font-size: 12px; color: #a4abb8; }

.uarc-google-btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  height: 52px;
  border-radius: 6px;
  border: 1px solid #eef1ee;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  color: #465362;
}
.uarc-google-btn:hover { border-color: #c3ccc3; }

#googleLoginButton {
	width: 100%;
	display: flex;
	justify-content: center;
}

.uarc-signup-hint {
  font-weight: 400;
  font-size: 14px;
  color: #666d80;
  text-align: center;
}
.uarc-signup-hint a { font-weight: 700; color: #2f7d4c; }

@media (max-width: 1100px) {
  .uarc-login-brand {
    width: 42%;
    min-width: 380px;
    padding: 44px 40px 36px;
  }

  .uarc-login-logo { height: 84px; }
  .uarc-login-headline { font-size: 30px; }
  .uarc-login-form-wrap { min-width: 0; padding: 40px; }
  .uarc-login-form { width: min(420px, 100%); }
}

@media (max-width: 760px) {
  body { background: #fbfcfa; }

  .uarc-login-card { min-height: 100dvh; }
  .uarc-login-brand { display: none; }
  .uarc-login-form-wrap { padding: 32px 24px; }
  .uarc-login-form { gap: 26px; }
  .uarc-login-title { font-size: 28px; }
}

@media (max-width: 420px) {
  .uarc-login-form-wrap { padding: 28px 18px; }
  .uarc-login-row { align-items: flex-start; flex-direction: column; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .uarc-login-brand { padding-block: 32px; }
  .uarc-login-brand-top { gap: 32px; }
  .uarc-login-logo { height: 72px; }
  .uarc-login-form-wrap { padding-block: 28px; }
  .uarc-login-form { gap: 22px; }
}