.screen {
  position: relative;
  background-color: #FBF9F3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.screen .body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: flex-start;
  position: relative;
  overflow: auto;
}

.screen .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 24px 40px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.screen .logo {
  position: relative;
  width: 86px;
  height: 27px;
}

.screen .union {
  position: absolute;
  width: 83px;
  height: 20px;
  top: 4px;
  left: 1px;
}

.screen .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex: 0 0 auto;
  position: relative;
  align-self: stretch;
}

.screen .div {
  font-weight: 800;
  color: transparent;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 41.6px;
  position: relative;
  align-self: stretch;
}

.screen .text-wrapper {
  color: #353535;
}

.screen .span {
  color: #ff7949;
}

.screen .supporting-txt {
  position: relative;
  align-self: stretch;
  font-weight: 400;
  color: var(--color-semantic-color-text-txt-body-information);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19.2px;
}

.screen .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: #fe7948;
  border-radius: 16px;
}

.screen .photo-camera {
  position: relative;
  width: 24px;
  height: 24px;
}

.screen .button-save {
  position: relative;
  width: fit-content;
  font-weight: var(--component-component-1-bold-font-weight);
  color: var(--color-semantic-color-button-filled-btn-filled-txt-primary);
  font-size: var(--component-component-1-bold-font-size);
  text-align: center;
  letter-spacing: var(--component-component-1-bold-letter-spacing);
  line-height: var(--component-component-1-bold-line-height);
  white-space: nowrap;
  font-style: var(--component-component-1-bold-font-style);
}

.screen .howto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.screen .howto-img {
  position: relative;
  min-width: 300px;
  max-width: 480px;
  width: 100%;
  height: 340px;
  background-color: #ece3d4;
  border-radius: 16px;
  overflow: hidden;
}

.screen .overlap-group {
  position: relative;
  width: 100%;
  height: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-drag: none;
}

.screen .overlap-group::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  scroll-snap-align: center;
}

.carousel-slide:nth-child(2) {
  scroll-snap-stop: always;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen .text-wrapper-2 {
  position: absolute;
  width: 100%;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  color: #353535;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20.8px;
}

.screen .step {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-non-semantic-color-white-white);
  border-radius: 12px;
  font-weight: 900;
  color: #353535;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.screen .pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-non-semantic-color-gray-200);
  transition: background-color 0.3s ease;
}

.pagination-dot.active {
  background-color: #ff7949;
}

.popup-dimmed {
  position: fixed;
  width: 100%;
  height: 100dvh;
  top: 0;
  left: 0;
  background-color: var(--color-semantic-color-background-bg-dimmed);
}

.popup-custom-popup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-token-gap-gap-default);
  padding: 32px 24px 24px;
  background-color: var(--color-semantic-color-background-bg-null);
  border-radius: 16px;
  box-shadow: var(--elevation-48);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 552px;
  width: calc(100% - 48px);
}

.popup-view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.popup-notice-memo {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-weight: var(--title-title-3-font-weight);
  color: var(--color-semantic-color-text-txt-title-default);
  font-size: var(--title-title-3-font-size);
  text-align: center;
  letter-spacing: var(--title-title-3-letter-spacing);
  line-height: var(--title-title-3-line-height);
  font-style: var(--title-title-3-font-style);
}

.popup-text-wrapper {
  position: relative;
  align-self: stretch;
  font-weight: var(--body-body-1-font-weight);
  color: var(--color-semantic-color-text-txt-body-default);
  font-size: var(--body-body-1-font-size);
  text-align: center;
  letter-spacing: var(--body-body-1-letter-spacing);
  line-height: var(--body-body-1-line-height);
  font-style: var(--body-body-1-font-style);
}

.popup-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #fcf4e5;
  border-radius: 16px;
}

.popup-button-line {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--component-component-1-bold-font-weight);
  color: #ff7949;
  font-size: var(--component-component-1-bold-font-size);
  text-align: center;
  letter-spacing: var(--component-component-1-bold-letter-spacing);
  line-height: var(--component-component-1-bold-line-height);
  white-space: nowrap;
  font-style: var(--component-component-1-bold-font-style);
}

/* 1000px 이상 화면 스타일 */
@media (min-width: 1000px) {
  .screen {
    max-width: 100%;
  }

  .screen .body {
    width: 100%; /* 1000px 버전 레이아웃 */
  }

  .screen .howto {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    align-items: center; /* 가운데 정렬 */
    gap: 16px; /* .howto 내 요소 간격 추가 (기존 스타일과 일치시키기) */
    padding: 16px 24px 40px; /* .howto 패딩 추가 (기존 스타일과 일치시키기) */
    position: relative; /* .howto 위치 관련 (기존 스타일과 일치시키기) */
    align-self: stretch; /* .howto 너비 관련 (기존 스타일과 일치시키기) */
    width: 100%; /* .howto 너비 관련 (기존 스타일과 일치시키기) */
    flex: 0 0 auto; /* .howto 크기 관련 (기존 스타일과 일치시키기) */
  }

  .screen .howto-img {
    width: 480px; /* 1000px 버전 너비 */
    height: auto; /* 기본 스타일 height 덮어쓰기 */
    overflow: visible; /* 기본 스타일 overflow 덮어쓰기 */
    background-color: #fbf9f3;
    position: relative; /* 내부 요소 위치 기준 */
    flex-shrink: 0; /* 크기 고정 */
  }

  /* 개별 howto 이미지 배경 설정 */
  #howto-slide-1 {
    background: url('./img/howto-01.png') no-repeat center center;
    background-size: cover;
  }
  #howto-slide-2 {
    background: url('./img/howto-02.png') no-repeat center center;
    background-size: cover;
  }
  #howto-slide-3 {
    background: url('./img/howto-03.png') no-repeat center center;
    background-size: cover;
  }

  /* 1000px 이상에서는 캐러셀 이미지 숨김 */
  .screen .howto-img img {
    display: none;
  }

  /* 1000px 이상에서는 캐러셀 동작 비활성화 */
  .screen .overlap-group {
    display: flex; /* 내부 요소 정렬 위해 flex 유지 */
    flex-direction: column; /* 내부 요소 세로 정렬 */
    align-items: center; /* 가운데 정렬 */
    overflow: visible; /* 스크롤 비활성화 */
    scroll-snap-type: none; /* 스냅 비활성화 */
    width: 100%;
    height: auto; /* 명시적으로 auto 설정 */
    gap: 16px;
  }

  .carousel-slide {
    scroll-snap-align: none; /* 스냅 비활성화 */
    width: 480px; /* howto-img와 동일 너비 */
    height: 340px; /* howto-img와 동일 높이 */
    border-radius: 16px; /* 슬라이드 모서리 둥글게 */
    overflow: hidden; /* 슬라이드 내용 넘침 숨김 (배경 이미지 클리핑) */
    position: relative; /* overflow: hidden 동작 보조 */
    transform: translateZ(0); /* 렌더링 최적화 및 버그 해결 시도 */
  }

  .carousel-slide:last-child {
    margin-bottom: 0; /* 마지막 슬라이드 간격 제거 */
  }

  /* 텍스트 위치 조정 */
  .screen .text-wrapper-2 {
    width: 264px;
    top: 55px;
    left: 50%;
    transform: translateX(-50%); /* 가운데 정렬 */
  }

  /* 스텝 위치 조정 */
  .screen .step {
    top: 24px;
    left: 50%;
    transform: translateX(-50%); /* 가운데 정렬 */
  }

  /* 1000px 이상에서는 페이지네이션 숨김 */
  .screen .pagination {
    display: none;
  }
}