:root{
  --side:#061019;
  --input:#e7d9bd;
  --placeholder:#8f887b;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0}
body{
  background:var(--side);
  color:#fff;
  font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
}
button,input{font:inherit}

/* 각 HTML은 PC용/모바일용으로 이미 분리되어 있으므로 화면 폭으로 문서 전체를 숨기지 않습니다. */
.page,
.mobile-page{
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:#061019;
}
.page{
  display:grid;
  place-items:center;
  background:linear-gradient(90deg,#061019,#0a1721 50%,#061019);
}
.mobile-page{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
}

/* 핵심: 이미지가 일반 흐름에서 부모 높이를 직접 만듭니다. aspect-ratio/min() 의존성 제거 */
.scene{
  position:relative;
  width:100vw;
  max-width:1672px;
  flex:none;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}
.background{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.mobile-page .scene{
  width:226vw;
  max-width:970px;
}
@media(max-width:360px){
  .mobile-page .scene{width:232vw}
}

.site-logo{
  position:absolute;
  left:50%;
  top:8.2%;
  transform:translateX(-50%);
  width:24%;
  max-width:405px;
  max-height:21.5%;
  object-fit:contain;
  display:none;
  z-index:5;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.42));
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.mobile-page .site-logo{max-width:none}

.login-form{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:6;
  pointer-events:none;
}
.field{
  position:absolute;
  left:32.90%;
  width:32.78%;
  height:6.35%;
  display:block;
  margin:0;
  padding:0;
  cursor:text;
  pointer-events:auto;
  z-index:8;
}
.field-id{top:43.05%}
.field-pw{top:50.62%}
.field input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--input);
  font-size:clamp(12px,.88vw,18px);
  font-weight:500;
  line-height:normal;
  padding:3px 8px 0 25.47%;
  text-shadow:0 1px 3px rgba(0,0,0,.48);
  caret-color:#f0d58d;
  cursor:text;
  pointer-events:auto;
  user-select:text;
  -webkit-user-select:text;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.mobile-page .field input{font-size:14px}
@media(max-width:360px){.mobile-page .field input{font-size:13px}}
.field input::placeholder{color:var(--placeholder);opacity:.88}
.field input:focus{outline:0;box-shadow:none}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--input);
  -webkit-box-shadow:0 0 0 1000px transparent inset;
  box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 99999s ease-out 0s;
  caret-color:#f0d58d;
}
.field input::-ms-reveal,.field input::-ms-clear{display:none}
.login-hit{
  position:absolute;
  left:32.90%;
  top:60.04%;
  width:32.78%;
  height:7.34%;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  z-index:8;
  -webkit-tap-highlight-color:transparent;
}
.signup-hit{
  position:absolute;
  left:39.30%;
  top:85.92%;
  width:20.08%;
  height:6.70%;
  display:block;
  text-decoration:none;
  z-index:8;
}
.login-hit:focus-visible,.signup-hit:focus-visible{
  outline:2px solid rgba(244,205,121,.9);
  outline-offset:2px;
  border-radius:4px;
}
.no-signup-version .field input{transform:translateY(2px)}

/* 이미지 경로/디코딩 실패 시 완전한 검은 화면 대신 원인을 식별할 수 있게 함 */
.background-load-error body::before{
  content:"로그인 배경 이미지를 불러오지 못했습니다";
  position:fixed;
  left:12px;
  right:12px;
  top:12px;
  z-index:9999;
  padding:10px 12px;
  background:#8b1e1e;
  color:#fff;
  font-size:13px;
  text-align:center;
}