@charset "utf-8";

/* =========================================================
   디자인 토큰
   - 이 파일 안에서 반복되던 색상/트랜지션 값을 변수로 추출.
   - 값 자체는 기존과 100% 동일하게 유지 (동작/외형 변경 없음).
   ========================================================= */
.hometaxModal {
  --navy: #192A4D;
  --muted: #6b7280;
  --line: #e5e7eb;
  --dim: #eef2f7;
  --color-error: #ff3b47;
  --color-error-text: #900;
  --color-error-bg: #ffe6e8;
  --color-error-bg-soft: #ffe6e8;
  --color-warning: #f59f00;
  --color-done-bg: #f0f7ff;
  --color-done-text: var(--navy);
  --color-muted-bg: #e8edf3;
  --color-muted-text: #38506a;
  --color-active-bg: #123a5c;
  --chev-bg: #E9E9E9;
  --transition-state: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  --transition-border: border-left-color 0.4s ease;
}


  /* =========================================================
   1. 모달 셸 (배경/레이아웃 박스)
   ========================================================= */
  .hometaxModal .modalPopup {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    z-index: 99999999999;
    top: 0;
    left: 0;
  }

  .hometaxModal .p_modalBox {
    max-width: 420px;
    padding: 1.5em 1em;
    background: #F4F4F5;
    border-radius: 10px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }

    .hometaxModal .p_modalBox .p_logo {
      display: flex;
    }

      .hometaxModal .p_modalBox .p_logo p {
        line-height: 55px;
        padding-left: 20px;
      }

  .hometaxModal .p_Box {
    background: #fff;
    padding: 1.5em 1em;
    border-radius: 10px;
    margin: 16px 0;
  }

  .hometaxModal .close-btn {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }

    .hometaxModal .close-btn::before,
    .hometaxModal .close-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 4px;
      background-color: #9EA3B7;
      transform-origin: center;
      transition: background-color 0.2s;
      border-radius: 19px;
    }

    .hometaxModal .close-btn::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .hometaxModal .close-btn::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .hometaxModal .close-btn:hover::before,
    .hometaxModal .close-btn:hover::after {
      background-color: #ff4d4f;
    }

  .hometaxModal .totalpop_closeBtn {
    position: absolute;
    top: -40px;
    width: 60px;
    height: 60px;
    background: #F4F4F5;
    text-align: center;
    line-height: 60px;
    border-radius: 10px;
    right: 152px;
    transform: translate(250%, 100%);
  }


  /* =========================================================
   2. 가격/퍼센트/슬라이더 영역
   ========================================================= */
  .hometaxModal .priceBoxWrap {
    display: flex;
    justify-content: end;
  }

  .hometaxModal .p_txtBox p {
    font-size: 16px;
  }

  .hometaxModal .p_pricBox .priceTit {
    text-align: left;
    padding-left: 40px;
    display: flex;
    place-items: end;
    line-height: 45px;
  }

  .hometaxModal .p_pricBox .priceBox {
    text-align: right;
    padding-left: 40px;
  }

    .hometaxModal .p_pricBox .priceBox input {
      font-size: 24px;
      font-weight: 400;
      width: 180px;
      border: none;
      text-align: right;
    }

    .hometaxModal .p_pricBox .priceBox span {
      font-size: 16px;
    }

  .hometaxModal .p_percent p {
    font-size: 16px;
  }

  .hometaxModal .percent {
    font-size: 24px;
  }

  .hometaxModal .slider-container {
    margin-top: 20px;
  }

  .hometaxModal .slider_txt {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .hometaxModal .slider_barBox {
    width: 100%;
  }

    .hometaxModal .slider_barBox input {
      width: 100%;
      padding: 0;
    }

  .hometaxModal .slider-labels {
    display: flex;
    gap: 72px;
  }

    .hometaxModal .slider-labels span {
      display: inline-block;
      color: #9EA3B7;
      font-weight: 500;
    }


  /* =========================================================
   3. 하단 총액 / 액션 버튼
   ========================================================= */
  .hometaxModal .p_modalBottom {
    margin-bottom: 0px;
    display: flex;
    justify-content: end;
  }

    .hometaxModal .p_modalBottom p {
      display: flex;
      place-items: center;
      padding-right: 20px;
    }

    .hometaxModal .p_modalBottom button {
      width: 110px;
      padding: 10px;
      background: #202020;
      color: #fff;
      text-align: center;
      border-radius: 50px;
    }

  .hometaxModal .modalPopup .totalBox {
    display: flex;
    justify-content: end;
    background: #202020;
    color: #fff;
    padding: 1em 2em;
    border-radius: 10px;
  }

    .hometaxModal .modalPopup .totalBox .tit {
      line-height: 30px;
      padding-right: 40px;
    }

  .hometaxModal .won {
    display: inline-block;
    padding-left: 20px;
  }

  .hometaxModal .cl_btn button {
    width: 100%;
    padding: 1em;
    font-size: 16px;
    background: linear-gradient(90deg, rgba(34,127,194,1) 0%, rgba(82,198,214,1) 100%);
    border-radius: 10px;
    margin: 16px 0;
    text-align: center;
    color: #fff;
  }


  /* =========================================================
   4. 진행 안내 시트 (헤더 / 상단 3단계 / 안내 박스)
   ========================================================= */
  .hometaxModal .sheet {
    max-width: 920px;
    margin: 0 auto;
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .hometaxModal .sheet__head {
    background: var(--navy);
    color: #fff;
    padding: 20px 0;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
  }

  .hometaxModal .sheet__body {
    padding: 24px 28px;
    background: #fff;
  }

  .hometaxModal .sheet__foot {
    padding: 0;
  }

  .hometaxModal .steps-top {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    align-items: center;
    gap: 12px;
  }

  .hometaxModal .steps-top__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px dashed var(--line);
  }

  .hometaxModal .steps-top__icon {
    height: 105px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--muted);
    position: relative;
  }

  .hometaxModal .steps-top__title {
    font-weight: 800;
  }

  .hometaxModal .steps-top__desc {
    font-size: 13px;
    color: var(--muted);
  }

  .hometaxModal .steps-top__arrow {
    height: 2px;
    background: var(--line);
  }

  /* 인증수단별 코너 배지 이미지 */
  .hometaxModal .passIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_passIcon.png") no-repeat center / contain;
  }

  .hometaxModal .naverIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_naverIcon.png") no-repeat center / contain;
  }

  .hometaxModal .kakaoIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_kakaoIcon.png") no-repeat center / contain;
  }

  .hometaxModal .kakaobankIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_kakaobankIcon.png") no-repeat center / contain;
  }

  .hometaxModal .nhIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_nhIcon.png") no-repeat center / contain;
  }

  .hometaxModal .kbIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_kbIcon.png") no-repeat center / contain;
  }

  .hometaxModal .wooriIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_wooriIcon.png") no-repeat center / contain;
  }

  .hometaxModal .tossIcon .icon-add {
    background: url("../../../Resources/Images/hometax/h_tossIcon.png") no-repeat center / contain;
  }

  .hometaxModal .passIcon .icon-add,
  .hometaxModal .naverIcon .icon-add,
  .hometaxModal .kakaoIcon .icon-add,
  .hometaxModal .kakaobankIcon .icon-add,
  .hometaxModal .nhIcon .icon-add,
  .hometaxModal .kbIcon .icon-add,
  .hometaxModal .wooriIcon .icon-add,
  .hometaxModal .tossIcon .icon-add {
    position: absolute;
    right: -15px;
    top: -4px;
    width: 30px;
    height: 30px;
  }

  .hometaxModal .info {
    margin: 18px 0 0;
    padding: 20px;
    border-radius: 8px;
    background: var(--dim);
    color: #374151;
    border: 1px solid #dde3ec;
  }

    .hometaxModal .info p {
      padding: 10px 0;
    }

    .hometaxModal .info ul {
      counter-reset: infoStep;
    }

    .hometaxModal .info li {
      margin: 10px 0;
      position: relative;
      padding-left: 36px;
    }

      .hometaxModal .info li::before {
        counter-increment: infoStep;
        content: counter(infoStep);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #123a5c;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }


  /* =========================================================
   5. 진행 단계 바 (Progress / Chevron)
   ========================================================= */
  .hometaxModal .progress {
    /* progressbar.css 잔재 초기화 */
    position: static;
    width: 100%;
    background: transparent;
    border-radius: 0;
    z-index: auto;
    transition: none;
    /* 실제 레이아웃 */
    display: flex;
    align-items: stretch;
    padding: 0px 20px;
    height: 74px;
    color: #fff;
    margin-bottom: 20px;
    justify-content: center;
  }

  .hometaxModal .progress02 .chev {
    width: 100%;
  }

    .hometaxModal .progress02 .chev::before {
      display: none;
    }

  .hometaxModal .chev {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 50px 12px 50px;
    background: var(--chev-bg);
    border-radius: 5px;
    font-weight: 500;
    white-space: nowrap;
    margin-right: 24px;
    width: 270px;
    transition: var(--transition-state);
  }

    .hometaxModal .chev::after {
      content: "";
      position: absolute;
      right: -14px;
      top: 0;
      border-top: 37px solid transparent;
      border-bottom: 37px solid transparent;
      border-left: 16px solid var(--chev-bg);
      border-radius: 3px;
      transition: var(--transition-border);
    }

  .hometaxModal .progress .chev:nth-last-child(2)::before {
    content: "";
    position: absolute;
    right: 252px;
    top: 0;
    border-top: 37px solid transparent;
    border-bottom: 37px solid transparent;
    border-left: 20px solid #fff;
  }

  .hometaxModal .progress .chev:nth-last-child(1)::before {
    content: "";
    position: absolute;
    right: 250px;
    top: 0;
    border-top: 37px solid transparent;
    border-bottom: 37px solid transparent;
    border-left: 20px solid #fff;
  }

  .hometaxModal .progress .chev:last-child {
    margin-right: 0;
  }

    .hometaxModal .progress .chev:last-child::after {
      display: none;
    }

  .hometaxModal .chev__label {
    color: #666;
  }

  /* --- 상태: 대기(muted) --- */
  .hometaxModal .chev--muted {
    background: var(--color-muted-bg);
    color: var(--color-muted-text);
  }

    .hometaxModal .chev--muted::after {
      border-left-color: var(--color-muted-bg);
    }

  /* --- 상태: 진행중(active) --- */
  .hometaxModal .chev--active {
    background: var(--color-active-bg);
    animation: ht-pulse-active 2s infinite ease-in-out;
  }

    .hometaxModal .chev--active::after {
      border-left-color: var(--color-active-bg);
    }

    .hometaxModal .chev--active .chev__label {
      color: #fff;
    }

  /* --- 상태: 완료(done) --- */
  .hometaxModal .chev--done {
    background: var(--color-done-bg);
    color: var(--color-done-text);
  }

    .hometaxModal .chev--done::after {
      border-left-color: var(--color-done-bg);
    }

  /* --- 상태: 에러(has-error) : FatalError / RetryableError 공통 --- */
  .hometaxModal .chev.has-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    position: relative;
    animation: none; /* 에러 시 펄스 제외 */
  }

    .hometaxModal .chev.has-error::after {
      content: "";
      position: absolute;
      right: -14px;
      top: 0;
      border-top: 37px solid transparent;
      border-bottom: 37px solid transparent;
      border-left: 16px solid var(--color-error-bg-soft);
      border-radius: 3px;
    }


  /* =========================================================
   6. 뱃지
   ========================================================= */
  .hometaxModal .badge {
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .hometaxModal .badge--done {
    background: var(--navy);
    color: #fff;
  }

  .hometaxModal .badge--todo {
    background: #d9e8f5;
    color: var(--navy);
  }

  .hometaxModal .badge--error {
    background: var(--color-error);
    color: #fff;
  }


  /* =========================================================
   7. 스피너
   ========================================================= */
  .hometaxModal .spinner {
    /* contract.css 간섭 방지 강제 초기화 */
    display: block;
    left: auto;
    z-index: auto;
    margin: 0;
    transform: none;
    top: inherit;
    /* 실제 스타일 */
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: ht-spin 1s linear infinite;
    opacity: 0;
  }

  .hometaxModal .chev--active .spinner {
    opacity: 1;
  }


  /* =========================================================
   8. 상태 아이콘 (경고 / 안내) + 툴팁 공통 베이스
   - error-icon(에러), warn-icon(무시 가능 경고)은 구조가 동일하고
     색상만 다르므로 셀렉터를 묶어서 공통 스타일을 한 번에 정의.
   ========================================================= */
  .hometaxModal .error-icon,
  .hometaxModal .warn-icon {
    display: none;
    margin-right: 4px;
    line-height: 0;
  }

  .hometaxModal .error-icon {
    color: var(--color-error);
  }

  .hometaxModal .warn-icon {
    color: var(--color-warning);
    cursor: help;
  }

  /* 노출 조건: FatalError → 경고 아이콘, RetryableError → 아이콘 숨기고 재시도 버튼으로 대체 */
  .hometaxModal .chev.has-error .error-icon {
    display: inline-flex;
    animation: ht-warnBlink 0.9s linear infinite;
  }

  .hometaxModal .chev.has-error.is-retryable .error-icon {
    display: none;
  }

  /* 노출 조건: SuccessIgnored → 완료 뱃지 + 안내 아이콘 */
  .hometaxModal .chev--done.has-warning .warn-icon {
    display: inline-flex;
  }

@keyframes ht-warnBlink {
  0% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  50% {
    opacity: 0.3;
    transform: translateY(-50%) scale(1.15);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* --- 공용 에러 툴팁 (error-tooltip) : 에러 메시지 / 경고 안내 문구 겸용 --- */
.hometaxModal .chev .error-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-4px);
  background: var(--color-error);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  z-index: 20;
}

  .hometaxModal .chev .error-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-error) transparent transparent transparent;
  }

/* 노출 트리거: PendingAuth / has-error 계열은 기본 빨강 톤 */
.hometaxModal .chev.chev--active.show-tooltip .error-tooltip,
.hometaxModal .chev.chev--active.show-tooltip:hover .error-tooltip {
  display: block;
}

.hometaxModal .chev.has-error:hover .error-tooltip {
  display: block;
}

/* 노출 트리거: SuccessIgnored는 같은 툴팁을 주황 톤으로 덮어써서 재사용 */
.hometaxModal .chev--done.has-warning:hover .error-tooltip,
.hometaxModal .chev--done.has-warning:focus-within .error-tooltip {
  display: block;
}

.hometaxModal .chev--done.has-warning .error-tooltip {
  background: var(--color-warning);
}

  .hometaxModal .chev--done.has-warning .error-tooltip::after {
    border-color: var(--color-warning) transparent transparent transparent;
  }


/* =========================================================
   9. 재시도 버튼 (RetryableError 전용)
   ========================================================= */
.hometaxModal .retry-btn {
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-error);
  cursor: pointer;
  position: relative;
}

.hometaxModal .chev.has-error.is-retryable .retry-btn {
  display: flex;
}

.hometaxModal .retry-btn__icon {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  font-size: 15px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hometaxModal .retry-btn:hover .retry-btn__icon {
  transform: rotate(35deg) scale(1.15);
}

/* 팝오버 툴팁 ("재시도") */
.hometaxModal .retry-btn__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: #333;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 21; /* error-tooltip(z-index:20)보다 위 */
}

  .hometaxModal .retry-btn__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #333;
  }

.hometaxModal .retry-btn:hover .retry-btn__tip,
.hometaxModal .retry-btn:focus-visible .retry-btn__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 클릭 시: 회전 → 스피너로 모핑 */
.hometaxModal .retry-btn.is-spinning {
  pointer-events: none;
}

  .hometaxModal .retry-btn.is-spinning .retry-btn__icon {
    animation: ht-retrySpin 0.5s ease-in-out;
  }

.hometaxModal .retry-btn.is-morphing .retry-btn__icon,
.hometaxModal .retry-btn.is-morphing .retry-btn__tip {
  opacity: 0;
}

@keyframes ht-retrySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   10. 하단 액션 바 (닫기 / 다음 단계)
   ========================================================= */
.hometaxModal .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--chev-bg);
  color: #334155;
  font-weight: 700;
  border-top: 1px solid var(--chev-bg);
}

.hometaxModal .bar--done {
  background: var(--color-active-bg);
  color: #e8f4ff;
  font-weight: 700;
}

.hometaxModal .bar__center {
  font-weight: 700;
  width: 80%;
  text-align: center;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7;
  transition: 0.25s;
}

  .hometaxModal .bar__center:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .hometaxModal .bar__center.is-active {
    background: var(--navy);
    color: #fff;
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    padding: 25px 0;
  }

.hometaxModal .tax_btn {
  appearance: none;
  background: #ffffff;
  padding: 25px 14px;
  cursor: pointer;
  width: 20%;
  font-weight: 700;
}

.hometaxModal .btn--primary {
  border: none;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}


/* =========================================================
   11. 공통 애니메이션 Keyframes
   ========================================================= */
@keyframes ht-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ht-pulse-active {
  0% {
    box-shadow: 0 0 0 0 rgba(18, 58, 92, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(18, 58, 92, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(18, 58, 92, 0);
  }
}


/* =========================================================
   12. 반응형 (760px 이하)
   ========================================================= */
@media (max-width:760px) {
  .hometaxModal .steps-top {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hometaxModal .steps-top__arrow {
    display: none;
  }

  .hometaxModal .progress {
    display: flow;
    gap: 8px;
    padding: 0px 20px;
    color: #fff;
    margin-bottom: 20px;
    height: 150px;
  }

  .hometaxModal .chev {
    padding: 10px 12px;
    margin-bottom: 10px;
    margin-right: 0px;
    width: 100%;
  }

    .hometaxModal .chev::after,
    .hometaxModal .chev::before {
      display: none;
    }

  .hometaxModal .spinner {
    width: 28px;
    height: 28px;
    transition: opacity 0.3s ease-in-out;
  }
}