#customer-service {
  margin-top: 13.6rem;

  .customer-service-header {
    width: 100%;
    height: 3.2rem;
    position: sticky;
    top: 13.6rem;
    display: flex;
    justify-content: center;
    background-color: var(--color-white);

    .customer-service-header__wrapper {
      display: flex;
      max-width: 101.4rem;
      width: 100%;
      height: 100%;

      .customer-service-header__item {
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;

        .customer-service-header__label {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: var(--font-label-medium-size);
          font-weight: var(--font-label-medium-m-weight);
          line-height: 2rem;
          letter-spacing: var(--font-label-medium-letter-spacing);
        }

        .customer-service-header__indicator {
          position: absolute;
          bottom: 0;
          display: none;
          width: 100%;
          height: 0.2rem;
          background-color: var(--color-icon-primary);
        }
      }

      .customer-service-header__item--active {
        .customer-service-header__indicator {
          display: block;
        }
      }
    }
  }

  .main {
    min-height: calc(100dvh - 6.4rem - 7.2rem - 3.2rem);

    .customer-service {
      display: flex;
      justify-content: center;
      width: 100%;

      .customer-service__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 101.4rem;
        width: 100%;

        .customer-service__faq {
          display: flex;
          flex-direction: column;
          width: 100%;

          .customer-service__faq-box {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            width: 100%;

            .customer-service__faq-header {
              display: flex;
              gap: var(--spacing-md);
              padding-block: var(--spacing-xl);

              .customer-service__faq-header-text {
                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);
              }

              .customer-service__faq-header-text--accent {
                color: var(--color-green-100);
              }
            }

			/* faq ¼öÁ¤ 2026-02-20 Á¤Áø¿ì */
			.customer-service__faq-list {
			  display: flex;
			  flex-direction: column;

			  .customer-service__faq-item {
				.customer-service__faq-item-header {
				  cursor: pointer;
				  height: 8rem;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  border-bottom: 0.1rem solid var(--color-border-primary);

				  transition:
					background-color 140ms ease,
					border-color 140ms ease,
					transform 80ms ease;

				  &:hover {
					background-color: var(--color-gray-600);
				  }

				  &:active {
					transform: scale(0.998);
				  }

				  &:focus-visible {
					outline: 0.2rem solid var(--color-green-100);
					outline-offset: 0.2rem;
				  }

				  .customer-service__faq-text {
					font-size: var(--font-label-large-size);
					font-weight: var(--font-label-large-weight);
					line-height: var(--font-label-large-line-height);
					letter-spacing: var(--font-label-large-letter-spacing);
				  }

				  .customer-service__faq-btn {
					cursor: pointer;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 2.4rem;
					aspect-ratio: 1/1;

					transform: rotate(-90deg);
					transition: transform 160ms cubic-bezier(.4, 0, .2, 1);

					svg {
					  width: 1.6rem;
					  height: 1.6rem;
					}

					&.open {
					  transform: rotate(90deg) translateX(0.2rem);
					}
				  }
				}

				.customer-service__faq-item-content {
				  display: flex;
				  flex-direction: column;
				  gap: var(--spacing-xl);

				  overflow: hidden;
				  box-sizing: border-box;

				  padding-block: 8rem;
				  border-bottom: 0.1rem solid var(--color-border-primary);

				  &.hidden {
					display: none;
				  }

				  &.is-animating {
					display: flex;
					visibility: hidden;
				  }

				  &.is-opening {
					visibility: visible;
				  }
				}

				&.is-open {
				  .customer-service__faq-item-header {
					background: var(--color-gray-600);
					border-bottom-color: transparent;
				  }

				  .customer-service__faq-text {
					color: var(--color-green-100);
					overflow: hidden;
				  }

				  .customer-service__faq-item-content {
					padding-block: 3.2rem;
					padding-inline: var(--spacing-lg);
					margin-block: 1.2rem;

					background: var(--color-gray-600);
					border-radius: 0.8rem;
					border: 0.1rem solid var(--color-border-primary);

					font-size: var(--font-label-medium-size);
					font-weight: var(--font-label-medium-weight);
					line-height: var(--font-label-medium-line-height);
					letter-spacing: var(--font-label-medium-letter-spacing);
					color: var(--color-gray-200);

					box-shadow:
					  0 0.4rem 1.2rem rgba(0, 0, 0, 0.04),
					  0 0.1rem 0.3rem rgba(0, 0, 0, 0.06);
				  }
				  .faq_content { word-break: break-word; }
				  .faq_content img {
					display:block;
					max-width:100%;
					height:auto;
					margin:8px 0;
				  }
				}
			  }
			}

          }
        }

        .customer-service__faq--hidden {
          display: none;
        }

        .customer-service__notice {
          width: 100%;

          .customer-service__notice-list {
            display: flex;
            flex-direction: column;

            .customer-service__notice-item {
              a {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-sm);
                padding-block: var(--spacing-xl);
                border-bottom: 0.1rem solid var(--color-border-primary);

                .customer-service__notice-text {
                  font-size: var(--font-label-large-size);
                  font-weight: var(--font-label-large-weight);
                  line-height: var(--font-label-large-line-height);
                  letter-spacing: var(--font-label-large-letter-spacing);
                }

                .customer-service__notice-date {
                  color: var(--color-gray-400);
                  font-size: var(--font-label-medium-size);
                  font-weight: var(--font-label-medium-weight);
                  line-height: var(--font-label-medium-line-height);
                  letter-spacing: var(--font-label-medium-letter-spacing);
                }
              }
            }
          }
        }

        .customer-service__notice--hidden {
          display: none;
        }

        .customer-service__inquiry {
          width: 100%;
          padding: var(--spacing-xl);

          form {
            .customer-service__inquiry-btn-wrapper {
              display: flex;
              gap: var(--spacing-lg);
              margin-top: var(--spacing-xl);

              input {
                height: 3.6rem;
              }

              .customer-service__inquiry-no-btn {
                color: var(--color-gray-400);
                background-color: var(--color-gray-500);
              }
            }
          }
        }

        .customer-service__inquiry--hidden {
          display: none;
        }

        .customer-service__history {
          width: 100%;

          .customer-service__history-empty {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-md);
            min-height: calc(100dvh - 6.4rem - 7.2rem - 3.2rem);

            .customer-service__history-empty-icon {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              align-items: center;

              svg {
                width: 6.4rem;
                height: 6.4rem;
                color: var(--color-gray-500);
              }
            }

            span {
              color: var(--color-gray-300);
              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);
            }
          }

          .customer-service__history-list {
            display: flex;
            flex-direction: column;

            .inquiry {
              cursor: pointer;
              display: flex;
              flex-direction: column;
              gap: var(--spacing-sm);
              padding-block: var(--spacing-lg);
              border-bottom: 0.1rem solid var(--color-border-primary);

              .inquiry__title {
                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);
              }

              .inquiry__info {
                display: flex;
                gap: var(--spacing-sm);
                color: var(--color-gray-300);
                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);

                .inquiry__result--completion {
                  color: var(--color-warning);
                }
              }
            }
          }
        }

        .customer-service__history--hidden {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 640px) {
  .customer-service-header {
    .customer-service-header__wrapper {
      padding-inline: var(--spacing-lg);
    }
  }

  .customer-service__faq-header,
  .customer-service__faq-item,
  .customer-service__notice-item {
    padding-inline: var(--spacing-lg);
  }

  .inquiry {
    padding-inline: var(--spacing-lg);
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  .customer-service-header {
    .customer-service-header__wrapper {
      padding-inline: var(--spacing-xl);
    }
  }

  .customer-service__faq-header,
  .customer-service__faq-item,
  .customer-service__notice-item {
    padding-inline: var(--spacing-xl);
  }

  .inquiry {
    padding-inline: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .customer-service-header {
    .customer-service-header__wrapper {
      padding-inline: var(--spacing-2xl);
    }
  }

  .customer-service__faq-header,
  .customer-service__faq-item,
  .customer-service__notice-item {
    padding-inline: var(--spacing-2xl);
  }

  .inquiry {
    padding-inline: var(--spacing-2xl);
  }
}