@layer components {
  .contact {
    block-size: 480cqi;
    overflow: hidden;
    padding-block: 14cqi;
    padding-inline: 6cqi;
    background-color: oklch(94.492% 0.0298 359.50);
    color: oklch(31.714% 0 0);
    font-family: var(--font-hero);
  }

  .contact__inner {
    display: flex;
    flex-direction: column;
    gap: 4cqi;
    inline-size: 88cqi;
    block-size: 452cqi;
  }

  .contact__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqi;
    inline-size: 88cqi;
    block-size: 29.25cqi;
  }

  .contact__title-sub-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    inline-size: 76cqi;
    block-size: 14.75cqi;
  }

  .contact__title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 66.75cqi;
    block-size: 7.25cqi;
    border-radius: var(--radius-full);
    padding-inline: 3cqi;
    background-color: oklch(66.503% 0.1804 8.68);
    color: oklch(100% 0 0);
    font-size: 4cqi;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
  }

  .contact__title-desc {
    inline-size: 76cqi;
    color: oklch(66.503% 0.1804 8.68);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }

  .contact__title-main {
    display: grid;
    place-items: center;
    inline-size: 67.75cqi;
    block-size: 13.5cqi;
    background-image: linear-gradient(176deg, oklch(66.503% 0.1804 8.68) 27%, oklch(76.091% 0.1479 40.43) 76%);
    background-clip: text;
    color: transparent;
    font-size: 10cqi;
    font-weight: 900;
    letter-spacing: 0.5cqi;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    -webkit-text-stroke: 1px oklch(100% 0 0);
    paint-order: stroke fill;
  }

  .contact__contents {
    display: flex;
    flex-direction: column;
    gap: 6cqi;
    inline-size: 88cqi;
    block-size: 418.75cqi;
  }

  .contact__tel {
    inline-size: 88cqi;
    block-size: 48.5cqi;
  }

  .contact__tel-header,
  .contact__form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    border: 3px solid oklch(66.503% 0.1804 8.68);
    border-radius: 2.5cqi 2.5cqi 0 0;
    background-color: oklch(66.503% 0.1804 8.68);
    text-align: center;
  }

  .contact__tel-header {
    block-size: 11.75cqi;
    padding-block: 3.25cqi 3cqi;
    padding-inline: 6cqi;
  }

  .contact__tel-header-text {
    color: oklch(100% 0 0);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
  }

  .contact__tel-body {
    display: flex;
    align-items: flex-start;
    inline-size: 100%;
    block-size: 36.75cqi;
    padding-block: 4cqi 6cqi;
    padding-inline: calc(6cqi - 3px);
    border-inline: 3px solid oklch(66.503% 0.1804 8.68);
    border-block-end: 3px solid oklch(66.503% 0.1804 8.68);
    border-radius: 0 0 2.5cqi 2.5cqi;
  }

  .contact__tel-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    inline-size: 76cqi;
    block-size: 26.75cqi;
  }

  .contact__tel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5cqi;
    inline-size: 76cqi;
    block-size: 20cqi;
    border: 2px solid oklch(100% 0 0);
    border-radius: 2.5cqi;
    background-color: oklch(100% 0 0);
    box-shadow: inset 0 -1cqi 0 0 oklch(82.005% 0.0177 267.76);
    color: oklch(66.503% 0.1804 8.68);
    text-align: center;
    text-decoration: none;
  }

  .contact__tel-btn-label {
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.35;
  }

  .contact__tel-btn-number {
    font-size: 5cqi;
    font-weight: 900;
    letter-spacing: 0.25cqi;
    line-height: 1.35;
  }

  .contact__tel-hours {
    inline-size: 76cqi;
    color: oklch(66.503% 0.1804 8.68);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }

  .contact__form {
    inline-size: 88cqi;
    block-size: 364.25cqi;
  }

  .contact__form-header {
    block-size: 12.5cqi;
    padding-block: 3.25cqi 3cqi;
    padding-inline: 6cqi;
  }

  .contact__form-header-text {
    color: oklch(100% 0 0);
    font-size: 5cqi;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
  }

  .contact__form-body {
    inline-size: 88cqi;
    block-size: 351.75cqi;
    padding-block: 8cqi;
    padding-inline: 6cqi;
    border-radius: 0 0 2.5cqi 2.5cqi;
    background-color: oklch(100% 0 0);
  }

  .contact__form-contents {
    display: flex;
    flex-direction: column;
    gap: 8cqi;
    inline-size: 76cqi;
    block-size: 335.75cqi;
  }

  .contact__form-fields {
    display: flex;
    flex-direction: column;
    gap: 6cqi;
    inline-size: 76cqi;
    block-size: 307.75cqi;
  }

  .contact__field,
  .contact__privacy {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    inline-size: 76cqi;
  }

  .contact__field {
    block-size: 22.5cqi;
  }

  .contact__field--error {
    block-size: 30.25cqi;
  }

  .contact__field--textarea {
    block-size: 70.5cqi;
  }

  .contact__field-label {
    display: flex;
    align-items: center;
    gap: 2cqi;
    block-size: 6.5cqi;
  }

  .contact__field-name {
    color: oklch(66.503% 0.1804 8.68);
    font-size: 4cqi;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
  }

  .contact__field-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 12cqi;
    block-size: 6.5cqi;
    border-radius: 0.75cqi;
    padding-block: 0.5cqi;
    padding-inline: 2cqi;
    color: oklch(100% 0 0);
    font-size: 4cqi;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
  }

  .contact__field-badge--required {
    background-color: oklch(61.440% 0.1932 25.51);
  }

  .contact__field-badge--optional {
    background-color: oklch(72.770% 0.0251 256.13);
  }

  .contact__field-input,
  .contact__field-textarea {
    inline-size: 76cqi;
    border: 0;
    border-radius: 1.25cqi;
    background-color: oklch(94.007% 0 0);
    color: oklch(66.503% 0.1804 8.68);
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.5;
  }

  .contact__field-input {
    block-size: 14cqi;
    padding: 4cqi;
  }

  .contact__field-textarea {
    block-size: 62cqi;
    min-block-size: 62cqi;
    padding: 4cqi;
    resize: vertical;
  }

  .contact__field-input::placeholder,
  .contact__field-textarea::placeholder {
    color: oklch(66.503% 0.1804 8.68 / 0.3);
    opacity: 1;
  }

  .contact__field--error .contact__field-input {
    background-color: oklch(94.949% 0.0252 17.60);
  }

  .contact__field-error {
    display: none;
    inline-size: 76cqi;
    color: oklch(61.440% 0.1932 25.51);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.5;
  }

  .contact__field--error .contact__field-error {
    display: block;
  }

  .contact__privacy {
    align-items: center;
    gap: 4cqi;
    block-size: 81cqi;
  }

  .contact__privacy > .contact__field-label {
    align-self: flex-start;
  }

  .contact__privacy-box {
    inline-size: 76cqi;
    block-size: 62.5cqi;
    padding: 4cqi;
    border: 1.5px solid oklch(72.066% 0.0027 345.24);
    background-color: oklch(100% 0 0);
  }

  .contact__privacy-text {
    inline-size: 68cqi;
    block-size: 54.5cqi;
    overflow-x: hidden;
    overflow-y: auto;
    color: oklch(31.714% 0 0);
    font-size: 3.5cqi;
    font-weight: 400;
    line-height: 1.5;
  }

  .contact__privacy-text strong {
    font-weight: 700;
  }

  .contact__privacy-text ul,
  .contact__privacy-text ol {
    list-style: revert;
    padding-inline-start: 5.25cqi;
  }

  .contact__privacy-agree {
    display: flex;
    align-items: center;
    gap: 4cqi;
    block-size: 6cqi;
    cursor: pointer;
  }

  .contact__privacy-checkbox {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    opacity: 0;
  }

  .contact__privacy-check {
    display: grid;
    place-items: center;
    inline-size: 6cqi;
    block-size: 6cqi;
    border: 1px solid oklch(31.714% 0 0);
    border-radius: 0.75cqi;
    background-color: oklch(100% 0 0);
  }

  .contact__privacy-check::after {
    content: "";
    display: none;
    inline-size: 3.5cqi;
    block-size: 2.5cqi;
    background-image: url("../../assets/images/common/privacy-check.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .contact__privacy-checkbox:checked + .contact__privacy-check::after {
    display: block;
  }

  .contact__privacy-agree-text {
    color: oklch(31.714% 0 0);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
  }

  .contact__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 76cqi;
    block-size: 20cqi;
    border: 0;
    border-radius: 2.5cqi;
    background-color: oklch(66.503% 0.1804 8.68);
    box-shadow: inset 0 -1cqi 0 0 oklch(48.806% 0.1461 7.93);
    color: oklch(100% 0 0);
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 900;
    letter-spacing: 0.45cqi;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }
}