/* /homes/css/hs_join_common.css */

@font-face{
  font-family:'ONE-Mobile-POP';
  src:url('/homes/css/ONE-Mobile-POP.woff') format('woff');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#FFFAEA;
  --stripe:#FFE88E;
  --orange:#F08300;
  --brown:#7B4A1C;
  --bd:#F8A965;
  --white:#fff;
}

html, body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  min-height: 100%;
}
body {
  font-family: 'ONE-Mobile-POP', sans-serif;
  color: var(--brown);
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
}

/* 뷰포트 */
.hs-viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow-y: auto; 
  overflow-x: hidden;
  display: block; 
}

/* 스테이지 */
.hs-stage {
  position: relative;
  margin: 0 auto;
  min-height: 100%;
  box-sizing: border-box;
}

/* ===== 상단 헤더 (화면 전체 너비 고정) ===== */
.hj-top { 
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%; 
  z-index: 100;
  background: var(--bg); 
}

.hj-top-inner {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  /* 패딩은 미디어쿼리에서 */
}

/* 뒤로가기 */
.hj-back {
  display: inline-flex;
  align-items: center; 
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.hj-back img { display: block; width: auto; }

/* 타이틀 */
.hj-title {
  color: #FFB71B;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}

/* 로고 (오른쪽 정렬) */
.hj-logo { 
  display: flex; 
  align-items: center;
  margin-left: auto;
}
.hj-logo img { display: block; width: auto; }

/* 스텝바 */
.hj-stepbar {
  background: var(--stripe);
  width: 100%;
  display: flex; justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hj-steps {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hj-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--orange);
  border-style: solid;
  border-color: var(--orange);
  box-sizing: border-box;
}
.hj-pill.is-active {
  background: var(--orange);
  color: #fff;
  border-color: transparent;
}
.hj-pill-face { display: block; }
.hj-arrow-img { display: block; width: auto; height: auto; }

/* 본문 래퍼 */
.hj-wrap {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 폼 공통 */
.hj-form { margin: 0 auto; }
.hj-row { display: flex; align-items: center; }
.hj-label { text-align: right; font-weight: normal; }
.hj-field { flex: 1; position: relative; }

.hj-input, .hj-select {
  width: 100%;
  border-style: solid;
  border-color: var(--bd);
  background: #fff;
  color: var(--brown);
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
}
.hj-input:focus, .hj-select:focus { border-color: var(--orange); }

/* 비밀번호 필드 텍스트 색상 및 폰트 (ONE-Mobile-POP 폰트가 비밀번호 점을 제대로 표시하지 못함) */
.hj-input[type="password"] {
  color: var(--brown);
  -webkit-text-fill-color: var(--brown);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif !important;
  -webkit-text-security: disc; /* Safari/iOS 보강 */
}
.hj-input[type="password"]::placeholder {
  color: rgba(123, 74, 28, 0.5);
  -webkit-text-fill-color: rgba(123, 74, 28, 0.5);
}

.hj-select { appearance: none; }
.hj-field.is-select:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 22px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-color: #7b4a1c;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  opacity: .9;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-width: 5px;
}

.hj-note { opacity: .85; }

/* 기관명 pill */
.hj-center-pill {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: calc(18 / 1080 * 100vh) calc(28 / 1080 * 100vh);
  background: var(--stripe);
  border-radius: 999px;
  text-align: center;
  font-size: calc(38 / 1080 * 100vh);
  color: var(--brown);
  box-sizing: border-box;
}
.hj-center-pill strong {
  font-weight: normal;
  margin-right: calc(8 / 1080 * 100vh);
}

/* ===== [핵심 수정] 알림창 ===== */
.hs-alert {
  /* ✅ absolute가 아닌 fixed로 변경하여 스테이지 밖, 화면 전체 덮기 */
  position: fixed; 
  inset: 0; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  z-index: 9999;
}
.hs-alert.is-active { display: flex; } 

.hs-alert-backdrop {
  position: absolute; inset: 0; 
  background: rgba(0,0,0,.55); /* 이제 화면 전체를 덮습니다 */
}
.hs-alert-card {
  position: relative; 
  z-index: 1; 
  background: #fff; 
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.hs-alert-msg {
  white-space: pre-line; /* 줄바꿈(\n) 표시 */
}
.hs-alert-btn {
  border: 0; 
  background: var(--orange); 
  color: #fff;
  font-family: 'ONE-Mobile-POP', sans-serif; 
  cursor: pointer;
  /* ✅ 버튼이 찌그러지지 않고 가로로 꽉 차게 복구 */
  width: 100%; 
}

/* Footer */
.hs-footer { width: 100%; }
.hs-footer-inner { display: flex; justify-content: center; }


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

/* [CASE 1] PC/가로모드: 높이(vh) 기준 */
@media (min-aspect-ratio: 1920/1080) {
  .hs-stage { width: calc(1920 / 1080 * 100vh); padding-top: calc(140 / 1080 * 100vh); }

  .hj-top-inner {
    height: calc(140 / 1080 * 100vh);
    padding: 0 calc(60 / 1080 * 100vh); /* 원본 패딩 */
  }
  
  .hj-back { gap: calc(26 / 1080 * 100vh); }
  .hj-back img { height: calc(108 / 1080 * 100vh); }
  .hj-title { font-size: calc(48 / 1080 * 100vh); }
  .hj-logo img { height: calc(72 / 1080 * 100vh); }

  .hj-stepbar { padding: calc(22 / 1080 * 100vh) 0; }
  .hj-steps { gap: calc(28 / 1080 * 100vh); max-width: calc(1200 / 1080 * 100vh); }
  .hj-pill {
    height: calc(92 / 1080 * 100vh);
    min-width: calc(360 / 1080 * 100vh);
    padding: 0 calc(34 / 1080 * 100vh);
    gap: calc(18 / 1080 * 100vh);
    border-radius: calc(999 / 1080 * 100vh);
    border-width: calc(3 / 1080 * 100vh);
  }
  .hj-pill-face { width: calc(70 / 1080 * 100vh); height: calc(60 / 1080 * 100vh); }
  .hj-pill-txt { font-size: calc(34 / 1080 * 100vh); }
  .hj-arrow-img { height: calc(30 / 1080 * 100vh); }

  .hj-wrap {
    max-width: calc(1200 / 1080 * 100vh);
    padding-top: calc((140 + 22 + 92 + 22 + 40) / 1080 * 100vh);
    padding-left: calc(60 / 1080 * 100vh);
    padding-right: calc(60 / 1080 * 100vh);
    padding-bottom: calc(80 / 1080 * 100vh);
  }
  .hj-form { width: calc(980 / 1080 * 100vh); }
  .hj-row { gap: calc(26 / 1080 * 100vh); margin: calc(22 / 1080 * 100vh) 0; }
  .hj-label { width: calc(260 / 1080 * 100vh); font-size: calc(38 / 1080 * 100vh); }
  .hj-input, .hj-select {
    height: calc(84 / 1080 * 100vh);
    border-radius: calc(10 / 1080 * 100vh);
    border-width: calc(3 / 1080 * 100vh);
    font-size: calc(28 / 1080 * 100vh);
    padding: 0 calc(22 / 1080 * 100vh);
    color: var(--brown);
  }
  .hj-select { padding-right: calc(70 / 1080 * 100vh); }
  .hj-field.is-select:after {
    right: calc(22 / 1080 * 100vh);
    width: calc(18 / 1080 * 100vh); height: calc(18 / 1080 * 100vh);
    border-width: calc(5 / 1080 * 100vh);
  }
  .hj-note {
    font-size: calc(20 / 1080 * 100vh);
    margin-left: calc(286 / 1080 * 100vh);
    margin-top: calc(-10 / 1080 * 100vh);
  }

  /* 기관명 pill 반응형 */
  .hj-center-pill {
    margin-top: calc(40 / 1080 * 100vh);
    margin-bottom: calc(22 / 1080 * 100vh);
    padding: calc(18 / 1080 * 100vh) calc(28 / 1080 * 100vh);
    font-size: calc(38 / 1080 * 100vh);
  }
  .hj-center-pill strong {
    margin-right: calc(8 / 1080 * 100vh);
  }

  /* 알림창 사이즈 복구 */
  .hs-alert-card {
    width: calc(520 / 1080 * 100vh);
    border-radius: calc(24 / 1080 * 100vh);
    padding: calc(40 / 1080 * 100vh);
  }
  .hs-alert-msg { font-size: calc(28 / 1080 * 100vh); margin: calc(10 / 1080 * 100vh) 0 calc(18 / 1080 * 100vh); }
  .hs-alert-btn { 
    height: calc(70 / 1080 * 100vh); 
    border-radius: calc(18 / 1080 * 100vh); 
    font-size: calc(28 / 1080 * 100vh); 
  }

  .hs-footer { padding-bottom: calc(30 / 1080 * 100vh); }
}

/* [CASE 2] 모바일/세로모드: 너비(vw) 기준 */
@media (max-aspect-ratio: 1920/1080) {
  .hs-stage { width: 100vw; padding-top: calc(140 / 1920 * 100vw); }
  .hj-top-inner { height: calc(140 / 1920 * 100vw); padding: 0 calc(60 / 1920 * 100vw); }
  
  .hj-back { gap: calc(26 / 1920 * 100vw); }
  .hj-back img { height: calc(108 / 1920 * 100vw); }
  .hj-title { font-size: calc(48 / 1920 * 100vw); }
  .hj-logo img { height: calc(72 / 1920 * 100vw); }

  .hj-stepbar { padding: calc(22 / 1920 * 100vw) 0; }
  .hj-steps { gap: calc(28 / 1920 * 100vw); max-width: calc(1200 / 1920 * 100vw); }
  .hj-pill {
    height: calc(92 / 1920 * 100vw);
    min-width: calc(360 / 1920 * 100vw);
    padding: 0 calc(34 / 1920 * 100vw);
    gap: calc(18 / 1920 * 100vw);
    border-radius: calc(999 / 1920 * 100vw);
    border-width: calc(3 / 1920 * 100vw);
  }
  .hj-pill-face { width: calc(70 / 1920 * 100vw); height: calc(60 / 1920 * 100vw); }
  .hj-pill-txt { font-size: calc(34 / 1920 * 100vw); }
  .hj-arrow-img { height: calc(30 / 1920 * 100vw); }

  .hj-wrap {
    max-width: calc(1200 / 1920 * 100vw);
    padding-top: calc((140 + 22 + 92 + 22 + 40) / 1920 * 100vw);
    padding-left: calc(60 / 1920 * 100vw);
    padding-right: calc(60 / 1920 * 100vw);
    padding-bottom: calc(80 / 1920 * 100vw);
  }
  .hj-form { width: calc(980 / 1920 * 100vw); }
  .hj-row { gap: calc(26 / 1920 * 100vw); margin: calc(22 / 1920 * 100vw) 0; }
  .hj-label { width: calc(260 / 1920 * 100vw); font-size: calc(38 / 1920 * 100vw); }
  .hj-input, .hj-select {
    height: calc(84 / 1920 * 100vw);
    border-radius: calc(10 / 1920 * 100vw);
    border-width: calc(3 / 1920 * 100vw);
    font-size: calc(28 / 1920 * 100vw);
    padding: 0 calc(22 / 1920 * 100vw);
    color: var(--brown);
  }
  .hj-select { padding-right: calc(70 / 1920 * 100vw); }
  .hj-field.is-select:after {
    right: calc(22 / 1920 * 100vw);
    width: calc(18 / 1920 * 100vw); height: calc(18 / 1920 * 100vw);
    border-width: calc(5 / 1920 * 100vw);
  }
  .hj-note {
    font-size: calc(20 / 1920 * 100vw);
    margin-left: calc(286 / 1920 * 100vw);
    margin-top: calc(-10 / 1920 * 100vw);
  }

  /* 기관명 pill 반응형 */
  .hj-center-pill {
    margin-top: calc(40 / 1920 * 100vw);
    margin-bottom: calc(22 / 1920 * 100vw);
    padding: calc(18 / 1920 * 100vw) calc(28 / 1920 * 100vw);
    font-size: calc(38 / 1920 * 100vw);
  }
  .hj-center-pill strong {
    margin-right: calc(8 / 1920 * 100vw);
  }

  /* 알림창 사이즈 복구 */
  .hs-alert-card {
    width: calc(520 / 1920 * 100vw);
    border-radius: calc(24 / 1920 * 100vw);
    padding: calc(40 / 1920 * 100vw);
  }
  .hs-alert-msg { font-size: calc(28 / 1920 * 100vw); margin: calc(10 / 1920 * 100vw) 0 calc(18 / 1920 * 100vw); }
  .hs-alert-btn { 
    height: calc(70 / 1920 * 100vw); 
    border-radius: calc(18 / 1920 * 100vw); 
    font-size: calc(28 / 1920 * 100vw); 
  }

  .hs-footer { padding-bottom: calc(30 / 1920 * 100vw); }
}