/*
 * SYS-001 로그인 / SYS-002 로딩
 *  - 배경 다크 전체화면(오피스맵 제거). 콘텐츠는 화면 정중앙에 모으고 요소는 크게.
 *  - 상단 바(.main-screen__bar / __logo / __admin)는 main-screen.css 정의를 재사용.
 */

.login-screen, .loading-screen {
  position: absolute; inset: 0; overflow: hidden;
  color: var(--gs-text); font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
}
/* 로딩: 순수 다크 */
.loading-screen {
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f7f4f1 52%, #ece7e2 100%);
  /* 로그인은 Pretendard 그대로, 로딩부터 오뮤 다예쁨체(발주처 0908 슬라이드 2·4) */
  font-family: var(--font-game);
}
/* 로그인: 오피스맵 배경 + 다크 오버레이 (기획서 SYS-001 백그라운드 추가) */
.login-screen {
  background:
    linear-gradient(90deg, #f4f1eeef 0%, #f4f1eee2 42%, #f4f1ee96 70%, #f4f1eec8 100%),
    url('../assets/img/office-map-bg.webp') center/cover no-repeat;
}
.login-screen::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, transparent 0 22%, #f4f1ee70 58%, #f4f1eee0 100%);
  pointer-events: none;
}
.login-screen > * { position: relative; z-index: 1; }

/* ── SYS-001 로그인: 중앙 폼 ── */
/* 로그인(발주처 요청 2026-09-08 슬라이드 1): 중앙 게임명 로고를 크게,
   입력·버튼도 기존보다 큰 비율로.
   좌상단 로고 크기는 main-screen.css 의 공통 값을 그대로 쓴다(메인 화면과 같다). */

.login-box {
  width: min(560px, 92vw);
  display: flex; flex-direction: column; text-align: center;
}
.login-box .game-logo {
  display: block; width: min(100%, 520px); height: auto; margin: 0 auto 30px;
  filter: drop-shadow(0 14px 40px #2a232030);
}
.login-box .eyebrow {
  color: var(--gs-cyan); font-size: clamp(12px, 1vw, 15px);
  font-weight: 900; letter-spacing: .22em; margin-bottom: 14px;
}
.login-box__title {
  margin: 0 0 34px; font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 900; letter-spacing: -.04em; line-height: 1.05; text-shadow: 0 12px 45px #2a232047;
}
.login-box__title .tt-accent { color: var(--gs-orange); }

.login__field {
  width: 100%; height: 72px; margin-bottom: 16px;
  border: 1px solid #e6ded966; border-radius: 14px;
  background: #faf7f5c9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0 18px 0 54px;
  font-family: inherit; font-weight: 600; font-size: clamp(17px, 1.5vw, 21px);
  color: var(--gs-text); box-shadow: inset 0 1px #1f242906, 0 8px 22px #2a232019;
  background-repeat: no-repeat; background-position: 19px center; background-size: 22px;
}
.login__field::placeholder { color: var(--gs-muted); font-weight: bold; }
.login__field:focus { outline: none; border-color: var(--gs-cyan); box-shadow: 0 0 0 3px #e9002d30, 0 0 20px #e9002d22, inset 0 1px #1f242906; }
.login__id { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f96' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20v-1a7 7 0 0 1 14 0v1'/%3E%3C/svg%3E"); }
.login__pw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f96' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); }

.login__submit {
  width: 100%; height: 76px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; font-size: clamp(19px, 1.7vw, 25px); font-weight: 800; color: #ffffff;
  background: linear-gradient(135deg, #e9002d, #ff7a01); border: 0; border-radius: 14px;
  box-shadow: 0 17px 42px #e9002d35; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.login__submit:hover { background: linear-gradient(135deg, #e9002d, #ff7a01); transform: translateY(-2px); box-shadow: 0 20px 46px #e9002d44; }
.login__submit:active { transform: translateY(0); }
.login__error { margin-top: 14px; min-height: 20px; font-size: clamp(12px, 1vw, 15px); color: var(--c-warn); text-align: center; }

/* ── SYS-002 로딩: 중앙 ── */
.loading-box { width: min(560px, 90vw); text-align: center; display: flex; flex-direction: column; align-items: center; }
/* 게임명은 로고 그림이다(발주처 0908 슬라이드 2). SK hynix 로고는 두지 않는다. */
.loading-box .game-logo {
  display: block; width: min(100%, 460px); height: auto; margin: 0 auto 30px;
  filter: drop-shadow(0 12px 36px #2a232030);
}
/* 가운데 문구는 로딩 중 유일하게 읽는 글이라 크게 둔다(사용자 지시 2026-09-09). */
.loading__text { color: var(--gs-muted); font-size: clamp(24px, 2.1vw, 30px); margin-bottom: 36px; line-height: 1.7; }
/* 발주처 지시: 안내 문장은 줄바꿈 없이 한 줄로(‘…있습니다.’ 가 둘째 줄로 넘어가지 않게). */
.loading__text > div { white-space: nowrap; }
.loading__gauge { position: relative; width: min(600px, 86vw); height: 26px; border: 1px solid #1f242911; border-radius: 999px; background: #1f24290b; box-shadow: inset 0 1px #1f242908; overflow: hidden; }
.loading__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--gs-cyan), #ffffff); transition: width .18s linear; }
.loading__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #1f2429; }