#ticket .main .ticket,
#auth .main .auth {
  display: flex;
  justify-content: center;
  width: 100%;
}

#ticket .main .ticket .ticket__wrapper,
#auth .main .auth .auth__wrapper {
  max-width: 48rem;
  width: 100%;
}

#ticket {
  margin-top: 6.4rem;

  .main {
    .ticket {
      .ticket__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: var(--spacing-xl);
        margin-top: var(--spacing-2xl);

        .ticket__header {
          font-size: var(--font-body-medium-size);
          font-weight: var(--font-body-medium-weight);
          line-height: var(--font-body-medium-line-height);
          letter-spacing: var(--font-body-medium-letter-spacing);
        }

        .ticket__form {
          margin-top: var(--spacing-2xl);
          padding-bottom: var(--spacing-lg);
          border-bottom: 0.1rem solid var(--color-border-primary);

          .ticket__error-msg {
            display: block;
            padding-bottom: var(--spacing-lg);
            color: var(--color-warning);
            font-size: var(--font-label-small-size);
            font-weight: var(--font-label-small-weight);
            line-height: var(--font-label-small-line-height);
            letter-spacing: var(--font-label-small-letter-spacing);
          }

          .ticket__error-msg--hidden {
            display: none;
          }

          .ticket__btn {
            margin-top: var(--spacing-3xl);
          }
        }

        .ticket__info {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--spacing-lg);
          margin-top: var(--spacing-xl);

          .ticket__info-title {
            font-size: var(--font-label-large-size);
            font-weight: var(--font-label-large-m-weight);
            line-height: var(--font-label-large-line-height);
            letter-spacing: var(--font-label-large-letter-spacing);
          }

          .ticket__info-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            grid-area: var(--spacing-sm);
            color: var(--color-gray-400);
            font-size: var(--font-label-small-size);
            font-weight: var(--font-label-small-weight);
            line-height: var(--font-label-small-line-height);
            letter-spacing: var(--font-label-small-letter-spacing);

            .ticket__info-text {
              text-align: center;
              word-break: keep-all;
            }
          }
        }
      }
    }
  }
}

#auth {
  margin-top: 13.6rem;

  .main {
    .auth {
      .auth__wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-xl);
      }

      .auth__phone-number {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);

        .auth__input-wrapper {
          display: flex;
          gap: var(--spacing-md);

          input {
            width: 100%;
            height: 3.6rem;
            padding-inline: var(--spacing-md);
            border: 0.1rem solid var(--color-gray-400);
            outline: none;
          }
        }

        input[type="button"] {
          cursor: pointer;
          width: 100%;
          height: 4.8rem;
          color: var(--color-white);
          background-color: var(--color-green-100);
          border: none;
        }
      }

      .auth__auth-number {
	  	margin-top: var(--spacing-2xl);
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);

        input {
          width: 100%;
          height: 3.6rem;
          padding-inline: var(--spacing-md);
          border: 0.1rem solid var(--color-gray-400);
          outline: none;
        }
      }

      .auth__terms {
		margin-top: var(--spacing-lg);
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: var(--spacing-md);
        background-color: var(--color-gray-500);

        .auth__terms-list {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-sm);

          li {
            font-size: var(--font-body-small-size);
            font-weight: var(--font-body-small-weight);
            line-height: var(--font-body-small-line-height);
            letter-spacing: var(--font-body-small-letter-spacing);
          }
        }

        .auth__agree {
          cursor: pointer;
          width: 100%;
          display: flex;
          align-items: center;
          gap: var(--spacing-sm);

          .auth__agree-input {
            .auth__agree-icon {
              width: 2.4rem;
              height: 2.4rem;
              color: var(--color-gray-400);
            }
          }

          .auth__agree-label {
            font-size: var(--font-label-medium-size);
            font-weight: var(--font-label-medium-m-weight);
            line-height: var(--font-label-medium-line-height);
            letter-spacing: var(--font-label-medium-letter-spacing);
          }

          #agree:checked ~ .auth__agree-input .auth__agree-icon {
            color: var(--color-gray-100);
          }
        }
      }

      .auth__btns {
	  	margin-top: var(--spacing-lg);
        width: 100%;
        display: flex;
        gap: var(--spacing-lg);

        button {
          width: 100%;
          height: 4.8rem;
          text-align: center;
          color: white;
          font-size: var(--font-body-large-size);
          font-weight: var(--font-body-large-m-weight);
          line-height: var(--font-body-large-line-height);
          letter-spacing: var(--font-body-large-letter-spacing);
        }

        .auth__btns-confirm {
          background-color: var(--color-gray-100);
        }

        .auth__btns-cancel {
          background-color: var(--color-warning);
        }
      }

      .auth__label {
        font-size: var(--font-label-medium-size);
        font-weight: var(--font-label-medium-m-weight);
        line-height: var(--font-label-medium-line-height);
        letter-spacing: var(--font-label-medium-letter-spacing);
      }
    }
  }
}

@media (max-width: 640px) {
  .auth {
    .auth__wrapper {
      padding-inline: var(--spacing-lg);
    }
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  .auth {
    .auth__wrapper {
      padding-inline: var(--spacing-xl);
    }
  }
}

@media (min-width: 1024px) {
  .auth {
    .auth__wrapper {
      padding-inline: var(--spacing-2xl);
    }
  }
}