:root{
  --bg:#FFFAEA;
  --orange:#F08300;
  --brown:#7b4a1c;
  --white:#fff;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  font-family:'ONE-Mobile-POP', sans-serif; /* ✅ 전체 폰트 */
  color:var(--brown);
  overflow-x:hidden;
  overflow-y:hidden;
  display:flex;
  flex-direction:column;
}

/* ✅ 폼요소는 폰트가 튀는 경우가 많아서 강제 */
button, input, select, textarea{
  font-family:'ONE-Mobile-POP', sans-serif;
}

button, input, select, textarea{
  font-family:'ONE-Mobile-POP', sans-serif;
}

.hs-join-code{
  flex:1;
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* 상단 이미지 버튼/로고 */
.hs-back{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  text-decoration:none;
  z-index:10;
}
.hs-back img{
  display:block;
  width:auto;
  height:auto;
}

.hs-brand{
  position:absolute;
  z-index:10;
}
.hs-brand img{
  display:block;
  width:auto;
  height:auto;
}

.hs-center{
  width: min(980px, 100%);
  margin: 0 auto;
  text-align:center;
  box-sizing:border-box;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  overflow:visible;
}

.hs-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
}
.hs-hero-illust{ width:auto; height:auto; }
.hs-hero-right{ display:block; width:auto; height:auto; }
.hs-hero-text{
  margin:0;
  color: var(--orange);
  line-height:1.25;
}

.hs-codebox{
  margin: 0 auto;
  background: var(--orange);
  border-radius: 18px;
  display:flex;
  align-items:center;
  box-sizing:border-box;
}
.hs-codebox-label{
  text-align:center;
  color:#fff;
  white-space:nowrap;
  box-sizing:border-box;
}
.hs-codebox-input{
  flex:1;
  border:0;
  outline:none;
  border-radius: 10px;
  color:#444;
  box-sizing:border-box;
  font-family:inherit;
}

.hs-submit{
  background:#fff;
  border-radius: 10px;
  border: 3px solid var(--orange);
  color: var(--brown);
  cursor:pointer;
  box-sizing:border-box;
  font-family:inherit;
}
.hs-submit:disabled{ opacity:.6; cursor:not-allowed; }

.hs-help{
  margin: 0;
  color: var(--orange);
}

/* ✅ footer 무조건 가운데 */
.hs-footer{ 
  padding: 0;
  text-align:center;
  box-sizing:border-box;
  flex-shrink:0;
  margin-top:auto;
}
.hs-footer-inner{
  width:min(1200px, 100%);
  margin:0 auto;
  text-align:center;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

/* =========================
   ✅ 경고창: 부드러운 등장/퇴장
   (display:none 금지 → opacity/visibility로 트랜지션)
   ========================= */
.hs-alert{
  position:fixed;
  inset:0;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.hs-alert.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}

.hs-alert-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  transition: opacity .22s ease;
}
.hs-alert.is-open .hs-alert-backdrop{ opacity:1; }

.hs-alert-card{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -48%) scale(.96);
  opacity:0;

  width:min(520px, 86%);
  background:#fff;
  border-radius:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  padding: 26px 22px 20px;
  border: 3px solid rgba(240,131,0,.35);
  text-align:center;

  transition: transform .22s ease, opacity .22s ease;
}
.hs-alert.is-open .hs-alert-card{
  transform: translate(-50%, -50%) scale(1);
  opacity:1;
}

.hs-alert-msg{
  margin: 6px 0 16px;
  font-size: clamp(20px, 1.9vw, 30px);
  color: var(--brown);
}
.hs-alert-btn{
  width: min(260px, 70%);
  height: 56px;
  border-radius: 12px;
  border:0;
  background: var(--orange);
  color:#fff;
  font-size: clamp(18px, 1.6vw, 26px);
  cursor:pointer;
}

/* ==========================================================================
   반응형 로직 (원본 1920x1080 기준)
   ========================================================================== */

/* [CASE 1] PC/가로모드: 높이(vh) 기준 */
@media (min-aspect-ratio: 1920/1080) {
  .hs-join-code{
    padding: calc(36 / 1080 * 100vh) calc(56 / 1080 * 100vh) calc(40 / 1080 * 100vh);
  }

  .hs-back{
    left: calc(56 / 1080 * 100vh);
    top: calc(34 / 1080 * 100vh);
  }
  .hs-back img{ height: calc(108 / 1080 * 100vh); }

  .hs-brand{
    right: calc(56 / 1080 * 100vh);
    top: calc(34 / 1080 * 100vh);
  }
  .hs-brand img{ height: calc(72 / 1080 * 100vh); }

  .hs-center{
    padding-top: 0;
  }

  .hs-hero{
    gap: calc(20 / 1080 * 100vh);
    margin-bottom: calc(20 / 1080 * 100vh);
  }
  .hs-hero-right{ height: calc(160 / 1080 * 100vh); }
  .hs-hero-text{
    font-size: calc(42 / 1080 * 100vh);
  }

  .hs-codebox{
    margin: calc(20 / 1080 * 100vh) auto calc(24 / 1080 * 100vh);
    width: min(calc(840 / 1080 * 100vh), 92%);
    padding: calc(32 / 1080 * 100vh) calc(30 / 1080 * 100vh);
    gap: calc(18 / 1080 * 100vh);
    border-radius: calc(18 / 1080 * 100vh);
  }
  .hs-codebox-label{
    width: calc(170 / 1080 * 100vh);
    font-size: calc(40 / 1080 * 100vh);
  }
  .hs-codebox-input{
    height: calc(70 / 1080 * 100vh);
    padding: 0 calc(18 / 1080 * 100vh);
    font-size: calc(32 / 1080 * 100vh);
    border-radius: calc(10 / 1080 * 100vh);
  }

  .hs-submit{
    width: min(calc(520 / 1080 * 100vh), 86%);
    height: calc(78 / 1080 * 100vh);
    border-radius: calc(10 / 1080 * 100vh);
    border-width: calc(3 / 1080 * 100vh);
    font-size: calc(34 / 1080 * 100vh);
  }

  .hs-help{
    margin: calc(12 / 1080 * 100vh) 0 0;
    font-size: calc(24 / 1080 * 100vh);
  }

  .hs-footer{ 
    padding: calc(12 / 1080 * 100vh) 0 calc(16 / 1080 * 100vh);
  }
  .hs-footer-inner{
    padding: 0 calc(56 / 1080 * 100vh);
  }

  .hs-alert-card{
    width: min(calc(520 / 1080 * 100vh), 86%);
    border-radius: calc(18 / 1080 * 100vh);
    padding: calc(26 / 1080 * 100vh) calc(22 / 1080 * 100vh) calc(20 / 1080 * 100vh);
    border-width: calc(3 / 1080 * 100vh);
  }
  .hs-alert-msg{
    margin: calc(6 / 1080 * 100vh) 0 calc(16 / 1080 * 100vh);
    font-size: calc(30 / 1080 * 100vh);
  }
  .hs-alert-btn{
    width: min(calc(260 / 1080 * 100vh), 70%);
    height: calc(56 / 1080 * 100vh);
    border-radius: calc(12 / 1080 * 100vh);
    font-size: calc(26 / 1080 * 100vh);
  }
}

/* [CASE 2] 모바일/세로모드: 너비(vw) 기준 */
@media (max-aspect-ratio: 1920/1080) {
  .hs-join-code{
    padding: calc(36 / 1920 * 100vw) calc(56 / 1920 * 100vw) calc(40 / 1920 * 100vw);
  }

  .hs-back{
    left: calc(56 / 1920 * 100vw);
    top: calc(34 / 1920 * 100vw);
  }
  .hs-back img{ height: calc(108 / 1920 * 100vw); }

  .hs-brand{
    right: calc(56 / 1920 * 100vw);
    top: calc(34 / 1920 * 100vw);
  }
  .hs-brand img{ height: calc(72 / 1920 * 100vw); }

  .hs-center{
    padding-top: 0;
  }

  .hs-hero{
    gap: calc(20 / 1920 * 100vw);
    margin-bottom: calc(20 / 1920 * 100vw);
  }
  .hs-hero-right{ height: calc(160 / 1920 * 100vw); }
  .hs-hero-text{
    font-size: calc(42 / 1920 * 100vw);
  }

  .hs-codebox{
    margin: calc(20 / 1920 * 100vw) auto calc(24 / 1920 * 100vw);
    width: min(calc(840 / 1920 * 100vw), 92%);
    padding: calc(32 / 1920 * 100vw) calc(30 / 1920 * 100vw);
    gap: calc(18 / 1920 * 100vw);
    border-radius: calc(18 / 1920 * 100vw);
  }
  .hs-codebox-label{
    width: calc(170 / 1920 * 100vw);
    font-size: calc(40 / 1920 * 100vw);
  }
  .hs-codebox-input{
    height: calc(70 / 1920 * 100vw);
    padding: 0 calc(18 / 1920 * 100vw);
    font-size: calc(32 / 1920 * 100vw);
    border-radius: calc(10 / 1920 * 100vw);
  }

  .hs-submit{
    width: min(calc(520 / 1920 * 100vw), 86%);
    height: calc(78 / 1920 * 100vw);
    border-radius: calc(10 / 1920 * 100vw);
    border-width: calc(3 / 1920 * 100vw);
    font-size: calc(34 / 1920 * 100vw);
  }

  .hs-help{
    margin: calc(12 / 1920 * 100vw) 0 0;
    font-size: calc(24 / 1920 * 100vw);
  }

  .hs-footer{ 
    padding: calc(12 / 1920 * 100vw) 0 calc(16 / 1920 * 100vw);
  }
  .hs-footer-inner{
    padding: 0 calc(56 / 1920 * 100vw);
  }

  .hs-alert-card{
    width: min(calc(520 / 1920 * 100vw), 86%);
    border-radius: calc(18 / 1920 * 100vw);
    padding: calc(26 / 1920 * 100vw) calc(22 / 1920 * 100vw) calc(20 / 1920 * 100vw);
    border-width: calc(3 / 1920 * 100vw);
  }
  .hs-alert-msg{
    margin: calc(6 / 1920 * 100vw) 0 calc(16 / 1920 * 100vw);
    font-size: calc(30 / 1920 * 100vw);
  }
  .hs-alert-btn{
    width: min(calc(260 / 1920 * 100vw), 70%);
    height: calc(56 / 1920 * 100vw);
    border-radius: calc(12 / 1920 * 100vw);
    font-size: calc(26 / 1920 * 100vw);
  }
}

@media (prefers-reduced-motion: reduce){
  .hs-alert, .hs-alert-backdrop, .hs-alert-card{ transition:none !important; }
}