/* 회원가입 시안의 4단계 흐름과 단계별 상태 화면을 구성합니다. */
.signup-main {
  min-height: 1010px;
  padding: 82px 24px 110px;
  background: #ffffff;
}

.signup-shell {
  width: min(100%, 1140px);
  margin-inline: auto;
}

.signup-heading {
  text-align: center;
}

.signup-heading h1 {
  color: #181b24;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.signup-heading p {
  margin-top: 3px;
  color: #a4a5aa;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.signup-progress {
  position: relative;
  display: grid;
  width: min(100%, 500px);
  margin: 38px auto 0;
  padding: 0;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.signup-progress::before {
  position: absolute;
  top: 26px;
  right: 58px;
  left: 58px;
  height: 1px;
  background: #d9dbe1;
  content: "";
}

.signup-progress li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #1e222c;
}

.signup-progress__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid #c9ccd3;
  border-radius: 999px;
  background: #f5f6f9;
  color: #c8cad1;
}

.signup-progress__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.62;
}

.signup-progress__icon-image--active {
  display: none;
}

.signup-progress li.is-active .signup-progress__icon-image--inactive {
  display: none;
}

.signup-progress li.is-active .signup-progress__icon-image--active {
  display: block;
}

.signup-progress strong {
  padding: 0 7px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.signup-progress li.is-active .signup-progress__icon {
  border-color: #111111;
  background: #ffbd18;
  color: #111111;
}

.signup-progress li.is-active .signup-progress__icon img {
  opacity: 1;
}

.signup-divider {
  height: 1px;
  margin-top: 30px;
  background: #e0e1e5;
}

.signup-feedback {
  width: min(100%, 620px);
  margin: 24px auto -4px;
  padding: 12px 18px;
  border: 1px solid #e16b42;
  border-radius: 5px;
  background: #fff6f2;
  color: #a64220;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.signup-feedback[data-state="success"] {
  border-color: #b8911d;
  background: #fff9e8;
  color: #72560a;
}

.signup-step {
  padding-top: 72px;
}

.signup-step[hidden] {
  display: none;
}

.signup-section-heading {
  margin-bottom: 38px;
}

.signup-section-heading h2,
.signup-existing > h3 {
  margin: 0;
  color: #20232c;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.45;
}

.signup-section-heading--description {
  margin-bottom: 28px;
}

.signup-section-heading--description p {
  margin-top: 8px;
  color: #8e9098;
  font-size: 13px;
  line-height: 1.6;
}

.signup-term-block + .signup-term-block {
  margin-top: 32px;
}

.signup-term-block h3 {
  margin: 0 0 14px;
  color: #252832;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.signup-term-block__content {
  height: 190px;
  overflow: auto;
  padding: 22px 24px;
  border: 1px solid #d9dbe1;
  border-radius: 7px;
  background: #ffffff;
  color: #7e818a;
  font-size: 12px;
  line-height: 1.8;
}

.signup-term-block__content:focus {
  border-color: #ffbd18;
  outline: none;
}

.signup-term-block__content p + p {
  margin-top: 7px;
}

.signup-agreement,
.signup-marketing-agreement {
  position: relative;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: #535660;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.signup-agreement input,
.signup-marketing-agreement input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.signup-check {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid #cbd0d8;
  border-radius: 3px;
  background: #ffffff;
}

.signup-agreement input:focus-visible + .signup-check,
.signup-marketing-agreement input:focus-visible + .signup-check {
  outline: 2px solid #303744;
  outline-offset: 2px;
}

.signup-agreement input:checked + .signup-check,
.signup-marketing-agreement input:checked + .signup-check {
  border-color: #ffbd18;
  background: #ffbd18;
}

.signup-agreement input:checked + .signup-check::after,
.signup-marketing-agreement input:checked + .signup-check::after {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 5px;
  height: 8px;
  border: solid #111111;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

.signup-agreement--all {
  display: flex;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid #e1e2e6;
  color: #252832;
  font-weight: 800;
}

.signup-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 44px;
}

.signup-button {
  display: inline-grid;
  min-width: 138px;
  min-height: 48px;
  place-items: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.signup-button--primary {
  border-color: #ffbd18;
  background: #ffbd18;
  color: #111111;
}

.signup-button--primary:hover,
.signup-button--primary:focus-visible {
  border-color: #f5aa00;
  background: #ffc939;
}

.signup-button--secondary {
  border-color: #d9dbe1;
  background: #ffffff;
  color: #8a8d95;
}

.signup-button--secondary:hover,
.signup-button--secondary:focus-visible {
  border-color: #a8abb2;
  color: #3b3e47;
}

/* 2단계: 휴대폰 인증과 가입된 아이디 안내 상태 */
.signup-identity-card {
  display: grid;
  min-height: 258px;
  place-items: center;
  align-content: center;
  padding: 34px;
  border: 1px solid #dcdee4;
  border-radius: 10px;
  background: #f8f8fb;
  text-align: center;
}

.signup-identity-card__icon {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #181b24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.signup-identity-card strong {
  margin-top: 12px;
  color: #1f222b;
  font-size: 18px;
  font-weight: 800;
}

.signup-identity-card p {
  margin-top: 12px;
  color: #92949c;
  font-size: 13px;
}

.signup-identity-card .signup-button {
  margin-top: 30px;
}

.signup-existing > h3 {
  margin-bottom: 18px;
}

.signup-existing__panel {
  min-height: 155px;
  padding: 28px 30px;
  border: 1px solid #dcdee4;
  border-radius: 10px;
  background: #f8f8fb;
  color: #6f727b;
}

.signup-existing__panel > strong {
  display: block;
  color: #343741;
  font-size: 14px;
  font-weight: 800;
}

.signup-existing__panel > p {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  font-size: 14px;
}

.signup-existing__panel > p b {
  color: #343741;
  font-weight: 800;
}

.signup-existing__panel > p span {
  color: #b0b2b9;
}

.signup-existing__panel > small {
  display: block;
  margin-top: 24px;
  color: #8b8e96;
  font-size: 12px;
  line-height: 1.6;
}

/* 3단계: 라벨, 입력, 보조 버튼을 행 단위로 정렬합니다. */
.signup-info-form {
  padding: 28px 34px;
  border: 1px solid #dcdee4;
  border-radius: 10px;
  background: #f8f8fb;
}

.signup-field {
  display: grid;
  min-height: 76px;
  grid-template-columns: 145px minmax(0, 500px);
  align-items: start;
  gap: 8px;
}

.signup-field > label {
  padding-top: 12px;
  color: #343741;
  font-size: 14px;
  font-weight: 800;
}

.signup-field__control {
  min-width: 0;
}

.signup-field__control > input,
.signup-field__row input {
  width: 100%;
  height: 42px;
  padding: 0 15px;
  border: 1px solid #d7d9df;
  border-radius: 6px;
  background: #ffffff;
  color: #1c2028;
  font-size: 13px;
  outline: none;
}

.signup-field__control > input:focus,
.signup-field__row input:focus {
  border-color: #ffbd18;
  box-shadow: 0 0 0 2px rgba(255, 189, 24, 0.15);
}

.signup-field input::placeholder {
  color: #c2c4ca;
}

.signup-field__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

.signup-field__row button {
  height: 42px;
  border-radius: 6px;
  background: #292e3b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.signup-field__row button:hover,
.signup-field__row button:focus-visible {
  background: #3b4253;
}

.signup-field small {
  display: block;
  margin-top: 7px;
  color: #a7a9b0;
  font-size: 11px;
  line-height: 1.4;
}

.signup-marketing-agreement {
  margin: 2px 0 0 155px;
  font-size: 12px;
}

.signup-info-note {
  margin-top: 17px;
  color: #8e9098;
  font-size: 12px;
  line-height: 1.6;
}

/* 4단계: 완료 메시지를 시안처럼 단일 패널로 강조합니다. */
.signup-complete {
  padding-top: 75px;
}

.signup-complete__panel {
  display: grid;
  min-height: 230px;
  place-items: center;
  align-content: center;
  padding: 42px 24px;
  border: 1px solid #dcdee4;
  border-radius: 10px;
  background: #f8f8fb;
  text-align: center;
}

.signup-complete__panel h2 {
  margin: 0;
  color: #111318;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.4;
}

.signup-complete__panel p {
  margin-top: 10px;
  color: #a1a3aa;
  font-size: 13px;
  line-height: 1.5;
}

.signup-complete__panel p b {
  margin-inline: 4px;
  color: #242832;
  font-weight: 800;
}

.signup-complete__panel .signup-button {
  margin-top: 33px;
  font-weight: 400;
}

@media (max-width: 899px) {
  .signup-main {
    min-height: 0;
    padding: 50px 16px 70px;
  }

  .signup-heading h1 {
    font-size: 28px;
  }

  .signup-progress {
    margin-top: 30px;
  }

  .signup-progress::before {
    right: 11%;
    left: 11%;
  }

  .signup-progress__icon {
    width: 48px;
    height: 48px;
  }

  .signup-progress strong {
    font-size: 11px;
  }

  .signup-divider {
    margin-top: 24px;
  }

  .signup-step {
    padding-top: 46px;
  }

  .signup-term-block__content {
    height: 165px;
    padding: 18px;
  }

  .signup-info-form {
    padding: 24px 20px;
  }

  .signup-field {
    min-height: 0;
    margin-bottom: 22px;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .signup-field > label {
    padding-top: 0;
  }

  .signup-marketing-agreement {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .signup-progress {
    width: 100%;
  }

  .signup-progress__icon {
    width: 42px;
    height: 42px;
  }

  .signup-progress::before {
    top: 21px;
  }

  .signup-progress strong {
    padding-inline: 2px;
    font-size: 10px;
  }

  .signup-actions {
    flex-direction: column;
  }

  .signup-button {
    width: 100%;
  }

  .signup-field__row {
    grid-template-columns: 1fr;
  }

  .signup-field__row button {
    width: 100%;
  }

  .signup-complete__panel h2 {
    font-size: 19px;
  }
}