:root {
  --bg: #D1EBFF;
  --orange: #F08300;
  --brown: #6b3f16;
  --white: #fff;
  
  /* [중요] JS에서 넘겨준 --hs-vh가 있으면 쓰고, 없으면 기본 1vh 사용 */
  /* 키보드가 올라와도 이 값은 변하지 않으므로 레이아웃이 깨지지 않음 */
  --fixed-vh: calc(var(--hs-vh, 1vh) * 100);
}

/* ===== 초기화 ===== */
* { box-sizing: border-box; }
html, body { 
  margin: 0; 
  padding: 0; 
  /* 높이를 100%가 아니라 고정된 변수값으로 강제 지정 */
  height: var(--fixed-vh); 
  overflow: hidden; /* 스크롤 방지 */
}

body.hs-body {
  margin: 0;
  background: var(--bg);
  font-family: 'ONE-Mobile-POP', 'Noto Sans KR', system-ui, sans-serif;
}

/* ===== 레이아웃 구조 ===== */
.hs-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 뷰포트 높이도 고정값 사용 (키보드 무시) */
  height: var(--fixed-vh);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hs-stage {
  position: relative;
  margin: 0 auto;
}

/* 요소별 기본 속성 */
.hs-lang { position: absolute; z-index: 5; }

/* 로고 애니메이션 */
@keyframes logo-shake {
  0%, 90%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  92% { transform: translate(-50%, 0) rotate(-3deg); }
  94% { transform: translate(-50%, 0) rotate(3deg); }
  96% { transform: translate(-50%, 0) rotate(-1deg); }
  98% { transform: translate(-50%, 0) rotate(1deg); }
}

.hs-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  animation: logo-shake 6s infinite ease-in-out;
}
.hs-logo img { display: block; width: 100%; height: auto; }

/* 메인 컨테이너 */
.hs-main {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 벌 */
@keyframes bee-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2%) rotate(-1deg); }
}

.hs-left { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hs-bee img {
  display: block; width: 100%; height: auto;
  animation: bee-float 2.8s infinite ease-in-out;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
}
.hs-left-text { text-align: center; line-height: 1.1; color: var(--orange); white-space: nowrap; }

/* 오른쪽 패널 */
.hs-right { display: flex; align-items: center; justify-content: center; }
.hs-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: url('/homes/images/login_box.png') no-repeat center center;
  background-size: 100% 100%; 
}
.hs-panel-title { color: var(--brown); text-align: center; }

/* 폼 요소 */
.hs-field { position: relative; margin: 0 auto; }
.hs-input {
  display: block; outline: none; background: #fff; border-style: solid; border-color: var(--orange);
  font-family: 'ONE-Mobile-POP', 'Noto Sans KR', system-ui, sans-serif;
  color: #4a2c12; caret-color: #4a2c12; -webkit-text-fill-color: #4a2c12; opacity: 1;
}
.hs-input::placeholder { color: rgba(240,131,0,.55); -webkit-text-fill-color: rgba(240,131,0,.55); }
.hs-input-pw { font-family: system-ui, -apple-system, sans-serif !important; letter-spacing: 0.12em; }
.hs-input-pw::placeholder { font-family: 'ONE-Mobile-POP', 'Noto Sans KR', system-ui, sans-serif !important; letter-spacing: 0; }

.hs-clear {
  position: absolute; top: 50%; transform: translateY(-50%); background: #fff; color: #666;
  cursor: pointer; border-style: solid; border-color: #bbb; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.hs-hint { text-align: center; color: #6a6a6a; }
.hs-login-btn {
  display: block; border: 0; background: var(--orange); color: #fff; cursor: pointer;
  font-family: 'ONE-Mobile-POP', 'Noto Sans KR', system-ui, sans-serif; margin: 0 auto;
}
.hs-login-btn:active { transform: translateY(1px); }

.hs-auto { display: flex; align-items: center; justify-content: center; color: #333; }
.hs-auto input { accent-color: var(--orange); margin: 0; }
.hs-links { display: flex; justify-content: center; }
.hs-chip {
  display: inline-flex; align-items: center; justify-content: center; border-style: solid; border-color: var(--orange);
  color: var(--orange); text-decoration: none; background: #fff; border-radius: 999px;
}

.hs-denied { background: #fff; border-radius: 22px; box-shadow: 0 14px 28px rgba(0,0,0,.10); color: #333; line-height: 1.4; }
.hs-denied-actions { display: flex; justify-content: center; }
.hs-btn-line {
  display: inline-flex; align-items: center; justify-content: center; border-style: solid; border-color: var(--orange);
  color: var(--orange); text-decoration: none; background: #fff; border-radius: 999px;
}
.hs-footer { position: absolute; left: 0; right: 0; text-align: center; color: #2e2e2e; }


/* =====================================================================
   반응형 코어 로직 수정 (모든 vh를 var(--fixed-vh)로 대체)
===================================================================== */

/* [CASE 1] 화면이 가로로 충분히 넓을 때 (기준: 높이) */
@media (min-aspect-ratio: 1920/1080) {
  .hs-stage {
    /* 100vh -> var(--fixed-vh)로 변경하여 키보드 영향 제거 */
    width:  calc(1920 / 1080 * var(--fixed-vh));
    height: var(--fixed-vh);
  }
  
  .hs-lang {
    left: calc(50 / 1080 * var(--fixed-vh));
    top:  calc(40 / 1080 * var(--fixed-vh));
  }
  
  .hs-logo {
    top: calc(40 / 1080 * var(--fixed-vh));
    width: calc(592 / 1080 * var(--fixed-vh)); 
  }
  
  .hs-main {
    top: calc(200 / 1080 * var(--fixed-vh));
    gap: 0;
  }
  
  .hs-left {
    width: calc(680 / 1080 * var(--fixed-vh));
    gap:   calc(18 / 1080 * var(--fixed-vh));
  }
  .hs-bee img {
    width: calc(520 / 1080 * var(--fixed-vh));
    max-height: calc(460 / 1080 * var(--fixed-vh));
  }
  .hs-left-text {
    font-size: calc(44 / 1080 * var(--fixed-vh));
  }
  
  .hs-right {
    width: calc(823 / 1080 * var(--fixed-vh));
    margin-left: calc(-80 / 1080 * var(--fixed-vh));
  }
  
  .hs-panel {
    width:  calc(823 / 1080 * var(--fixed-vh));
    height: calc(751 / 1080 * var(--fixed-vh));
    padding-top: calc(190 / 1080 * var(--fixed-vh));
  }
  .hs-panel-title {
    font-size: calc(46 / 1080 * var(--fixed-vh));
    margin-bottom: calc(26 / 1080 * var(--fixed-vh));
  }
  
  .hs-form { width: calc(460 / 1080 * var(--fixed-vh)); }
  .hs-field { 
    width: calc(430 / 1080 * var(--fixed-vh)); 
    margin: calc(16 / 1080 * var(--fixed-vh)) auto;
  }
  
  .hs-input {
    width: 100%;
    height: calc(60 / 1080 * var(--fixed-vh));
    /* X버튼 위치 확보를 위해 padding 값도 고정 높이 기준으로 계산 */
    padding: 0 calc(56 / 1080 * var(--fixed-vh)) 0 calc(26 / 1080 * var(--fixed-vh));
    border-radius: calc(999 / 1080 * var(--fixed-vh));
    border-width: calc(3 / 1080 * var(--fixed-vh));
    font-size: calc(20 / 1080 * var(--fixed-vh));
  }
  .hs-input-pw { font-size: calc(22 / 1080 * var(--fixed-vh)); }
  
  .hs-clear {
    right: calc(14 / 1080 * var(--fixed-vh));
    width: calc(34 / 1080 * var(--fixed-vh));
    height: calc(34 / 1080 * var(--fixed-vh));
    border-width: calc(2 / 1080 * var(--fixed-vh));
    font-size: calc(20 / 1080 * var(--fixed-vh));
  }
  
  .hs-hint {
    margin-top: calc(6 / 1080 * var(--fixed-vh));
    font-size: calc(14 / 1080 * var(--fixed-vh));
  }
  
  .hs-login-btn {
    width: calc(240 / 1080 * var(--fixed-vh));
    height: calc(66 / 1080 * var(--fixed-vh));
    border-radius: calc(999 / 1080 * var(--fixed-vh));
    font-size: calc(24 / 1080 * var(--fixed-vh));
    margin-top: calc(22 / 1080 * var(--fixed-vh));
    margin-bottom: calc(10 / 1080 * var(--fixed-vh));
  }
  
  .hs-auto {
    gap: calc(10 / 1080 * var(--fixed-vh));
    font-size: calc(18 / 1080 * var(--fixed-vh));
    margin: calc(10 / 1080 * var(--fixed-vh)) 0 calc(18 / 1080 * var(--fixed-vh));
  }
  .hs-auto input {
    width: calc(26 / 1080 * var(--fixed-vh));
    height: calc(26 / 1080 * var(--fixed-vh));
  }
  
  .hs-links {
    gap: calc(16 / 1080 * var(--fixed-vh));
    margin-top: calc(8 / 1080 * var(--fixed-vh));
  }
  .hs-chip {
    height: calc(44 / 1080 * var(--fixed-vh));
    padding: 0 calc(18 / 1080 * var(--fixed-vh));
    border-width: calc(2 / 1080 * var(--fixed-vh));
    font-size: calc(18 / 1080 * var(--fixed-vh));
  }
  
  .hs-denied {
    width: calc(760 / 1080 * var(--fixed-vh));
    padding: calc(26 / 1080 * var(--fixed-vh)) calc(28 / 1080 * var(--fixed-vh));
    font-size: calc(18 / 1080 * var(--fixed-vh));
  }
  .hs-denied-actions { gap: calc(12 / 1080 * var(--fixed-vh)); margin-top: calc(18 / 1080 * var(--fixed-vh)); }
  .hs-btn-line {
    height: calc(44 / 1080 * var(--fixed-vh));
    padding: 0 calc(16 / 1080 * var(--fixed-vh));
    border-width: calc(2 / 1080 * var(--fixed-vh));
    font-size: calc(16 / 1080 * var(--fixed-vh));
  }

  .hs-footer {
    bottom: calc(22 / 1080 * var(--fixed-vh));
    font-size: calc(18 / 1080 * var(--fixed-vh));
  }
}

/* [CASE 2] 화면이 세로로 길 때 (기준: 너비 vw) */
/* 이 부분은 vw 기준이라 키보드 영향이 덜하지만, 안정성을 위해 높이를 고정값으로 설정 */
@media (max-aspect-ratio: 1920/1080) {
  .hs-stage {
    width: 100vw;
    /* 높이를 키보드 영향 없는 고정값 비율로 맞춤 */
    height: calc(1080 / 1920 * 100vw);
  }
  
  /* ...이하 vw 기준 코드는 원본 유지 (vw는 키보드 영향을 받지 않으므로 안전함) ... */
  .hs-lang { left: calc(50 / 1920 * 100vw); top: calc(40 / 1920 * 100vw); }
  .hs-logo { top: calc(40 / 1920 * 100vw); width: calc(592 / 1920 * 100vw); }
  .hs-main { top: calc(200 / 1920 * 100vw); }
  .hs-left { width: calc(680 / 1920 * 100vw); gap: calc(18 / 1920 * 100vw); }
  .hs-bee img { width: calc(520 / 1920 * 100vw); max-height: calc(460 / 1920 * 100vw); }
  .hs-left-text { font-size: calc(44 / 1920 * 100vw); }
  .hs-right { width: calc(823 / 1920 * 100vw); margin-left: calc(-80 / 1920 * 100vw); }
  .hs-panel { width: calc(823 / 1920 * 100vw); height: calc(751 / 1920 * 100vw); padding-top: calc(190 / 1920 * 100vw); }
  .hs-panel-title { font-size: calc(46 / 1920 * 100vw); margin-bottom: calc(26 / 1920 * 100vw); }
  .hs-form { width: calc(460 / 1920 * 100vw); }
  .hs-field { width: calc(430 / 1920 * 100vw); margin: calc(16 / 1920 * 100vw) auto; }
  .hs-input { width: 100%; height: calc(60 / 1920 * 100vw); padding: 0 calc(56 / 1920 * 100vw) 0 calc(26 / 1920 * 100vw); border-radius: calc(999 / 1920 * 100vw); border-width: calc(3 / 1920 * 100vw); font-size: calc(20 / 1920 * 100vw); }
  .hs-input-pw { font-size: calc(22 / 1920 * 100vw); }
  .hs-clear { right: calc(14 / 1920 * 100vw); width: calc(34 / 1920 * 100vw); height: calc(34 / 1920 * 100vw); border-width: calc(2 / 1920 * 100vw); font-size: calc(20 / 1920 * 100vw); }
  .hs-hint { margin-top: calc(6 / 1920 * 100vw); font-size: calc(14 / 1920 * 100vw); }
  .hs-login-btn { width: calc(240 / 1920 * 100vw); height: calc(66 / 1920 * 100vw); border-radius: calc(999 / 1920 * 100vw); font-size: calc(24 / 1920 * 100vw); margin-top: calc(22 / 1920 * 100vw); margin-bottom: calc(10 / 1920 * 100vw); }
  .hs-auto { gap: calc(10 / 1920 * 100vw); font-size: calc(18 / 1920 * 100vw); margin: calc(10 / 1920 * 100vw) 0 calc(18 / 1920 * 100vw); }
  .hs-auto input { width: calc(26 / 1920 * 100vw); height: calc(26 / 1920 * 100vw); }
  .hs-links { gap: calc(16 / 1920 * 100vw); margin-top: calc(8 / 1920 * 100vw); }
  .hs-chip { height: calc(44 / 1920 * 100vw); padding: 0 calc(18 / 1920 * 100vw); border-width: calc(2 / 1920 * 100vw); font-size: calc(18 / 1920 * 100vw); }
  .hs-denied { width: calc(760 / 1920 * 100vw); padding: calc(26 / 1920 * 100vw) calc(28 / 1920 * 100vw); font-size: calc(18 / 1920 * 100vw); }
  .hs-denied-actions { gap: calc(12 / 1920 * 100vw); margin-top: calc(18 / 1920 * 100vw); }
  .hs-btn-line { height: calc(44 / 1920 * 100vw); padding: 0 calc(16 / 1920 * 100vw); border-width: calc(2 / 1920 * 100vw); font-size: calc(16 / 1920 * 100vw); }
  .hs-footer { bottom: calc(22 / 1920 * 100vw); font-size: calc(18 / 1920 * 100vw); }
}