/* /homes/css/hs_find_account.css */

/* stepbar 숨김 */
.hj-no-stepbar .hj-stepbar { display: none; }

.hf-wrap { padding-top: 0; }

/* 탭 */
.hf-tabs {
  display: flex;
  justify-content: center;
}
.hf-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--orange);
  font-family: 'ONE-Mobile-POP', sans-serif;
  cursor: pointer;
  border-style: solid;
  border-color: var(--orange);
}
.hf-tab.is-active {
  background: var(--orange);
  color: #fff;
  border-color: transparent;
}

/* 히어로 */
.hf-hero {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hf-hero-img { display: block; width: auto; }
.hf-hero-text {
  margin: 0;
  color: var(--orange);
  letter-spacing: -0.5px;
  line-height: 1.28;
}
.hf-hero-text b { color: var(--orange); }

/* 폼, 결과 */
.hf-form, .hf-result { width: 100%; }

/* 버튼 */
.hf-btn {
  border: 0;
  background: var(--orange);
  color: #fff;
  font-family: 'ONE-Mobile-POP', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hf-btn--link { display: flex; }

.hf-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hf-link {
  border: 0;
  background: transparent;
  color: var(--brown);
  font-family: 'ONE-Mobile-POP', sans-serif;
  opacity: .85;
  cursor: pointer;
}

.hf-readonly { background: #f3f3f3; }


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

/* [CASE 1] PC/가로모드: vh 기준 (세로 줄면 축소) */
@media (min-aspect-ratio: 1920/1080) {
  .hf-tabs {
    gap: calc(18 / 1080 * 100vh);
    margin: calc(8 / 1080 * 100vh) 0 calc(46 / 1080 * 100vh);
  }
  .hf-tab {
    height: calc(84 / 1080 * 100vh);
    min-width: calc(360 / 1080 * 100vh);
    padding: 0 calc(34 / 1080 * 100vh);
    border-radius: calc(999 / 1080 * 100vh);
    border-width: calc(3 / 1080 * 100vh);
    font-size: calc(34 / 1080 * 100vh);
  }

  .hf-hero {
    gap: calc(34 / 1080 * 100vh);
    margin: calc(45 / 1080 * 100vh) 0 calc(20 / 1080 * 100vh);
  }
  .hf-hero--compact { margin: calc(76 / 1080 * 100vh) 0 calc(36 / 1080 * 100vh); }
  
  .hf-hero-img { height: calc(170 / 1080 * 100vh); }
  .hf-hero-text { font-size: calc(42 / 1080 * 100vh); }

  .hf-form { margin-top: calc(6 / 1080 * 100vh); }
  .hf-result { margin-top: calc(6 / 1080 * 100vh); }

  .hf-btn {
    width: calc(360 / 1080 * 100vh);
    height: calc(84 / 1080 * 100vh);
    border-radius: calc(999 / 1080 * 100vh);
    font-size: calc(34 / 1080 * 100vh);
    margin: calc(46 / 1080 * 100vh) auto 0;
  }

  .hf-actions {
    gap: calc(18 / 1080 * 100vh);
    margin-top: calc(30 / 1080 * 100vh);
  }
  .hf-link { font-size: calc(24 / 1080 * 100vh); }
}

/* [CASE 2] 모바일/세로모드: vw 기준 */
@media (max-aspect-ratio: 1920/1080) {
  .hf-tabs {
    gap: calc(18 / 1920 * 100vw);
    margin: calc(8 / 1920 * 100vw) 0 calc(46 / 1920 * 100vw);
  }
  .hf-tab {
    height: calc(84 / 1920 * 100vw);
    min-width: calc(360 / 1920 * 100vw);
    padding: 0 calc(34 / 1920 * 100vw);
    border-radius: calc(999 / 1920 * 100vw);
    border-width: calc(3 / 1920 * 100vw);
    font-size: calc(34 / 1920 * 100vw);
  }

  .hf-hero {
    gap: calc(34 / 1920 * 100vw);
    margin: calc(45 / 1920 * 100vw) 0 calc(20 / 1920 * 100vw);
  }
  .hf-hero--compact { margin: calc(76 / 1920 * 100vw) 0 calc(36 / 1920 * 100vw); }
  
  .hf-hero-img { height: calc(170 / 1920 * 100vw); }
  .hf-hero-text { font-size: calc(42 / 1920 * 100vw); }

  .hf-form { margin-top: calc(6 / 1920 * 100vw); }
  .hf-result { margin-top: calc(6 / 1920 * 100vw); }

  .hf-btn {
    width: calc(360 / 1920 * 100vw);
    height: calc(84 / 1920 * 100vw);
    border-radius: calc(999 / 1920 * 100vw);
    font-size: calc(34 / 1920 * 100vw);
    margin: calc(46 / 1920 * 100vw) auto 0;
  }

  .hf-actions {
    gap: calc(18 / 1920 * 100vw);
    margin-top: calc(30 / 1920 * 100vw);
  }
  .hf-link { font-size: calc(24 / 1920 * 100vw); }
}