.empty_area {
  height: 300px;
}

/* Dream Orphans 24 — 얇게 */
.do-regular-24 {
  font-family: "Dream Orphans", sans-serif;
  font-weight: 300;
  /* 폰트가 300을 지원하지 않으면 자동으로 400로 폴백됨 */
  font-size: 24px;
  letter-spacing: 0.2px;
}

/* ====== Recommended Types Section ====== */
.recommended-types-section {
  background-color: #ffffff;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

.recommended-container {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height: auto;
  /* 컨텐츠에 맞게 자동 조정 */
  min-height: 2500px;
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
}

/* ====== 순차 애니메이션 스타일 ====== */
.reco-item {
  width: 80%;
  height: 100%;
  opacity: 0;
  transform: translateY(80px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reco-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 1번 영역 - 기존 위치 유지 */
.reco-overlap {
  position: absolute;
  width: 60%;
  height: 1201px;
  top: 0;
  left: 60%;
}

.reco-ellipse {
  width: 287px;
  height: 287px;
  top: 859px;
  left: 496px;
  border-radius: 143.52px;
  transform: rotate(-122.87deg);
  position: absolute;
  filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

.reco-overlap-group {
  position: absolute;
  width: 50%;
  height: 1089px;
  top: 0;
  left: 0;
}

.reco-line {
  position: absolute;
  width: 1px;
  height: 100vh;
  top: 0;
  left: 229px;
  object-fit: cover;
}

/* .reco-line-2 {
  position: absolute;
  width: 1px;
  height: 1089px;
  top: -109px;
  left: 284px;
  object-fit: cover;
}

.reco-line-3 {
  position: absolute;
  width: 1px;
  height: 187px;
  top: 583px;
  right: -405px;
  object-fit: cover;
} */

.reco-rectangle {
  position: absolute;
  width: 314px;
  height: 464px;
  top: 231px;
  left: 32px;
  background-color: #d9d9d9;
  box-shadow: 30px 37px 59.5px #00000040;
}

.reco-image {
  position: absolute;
  width: 377px;
  height: 547px;
  top: 153px;
  left: 0;
  aspect-ratio: 0.69;
}

.reco-rectangle-2 {
  position: absolute;
  width: 324px;
  height: 10%;
  top: 30%;
  right: 10%;
  align-items: flex-start;
  border-radius: 30px;
  backdrop-filter: blur(18.2px) brightness(100%);
  -webkit-backdrop-filter: blur(18.2px) brightness(100%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(148, 148, 148, 0.4) 100%
  );
}

.reco-text-wrapper {
  /* position: absolute; */
  width: 78px;
  /* top: 441px; */
  /* left: 296px; */
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 64px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  text-align: left;
}

.reco-p {
  width: 249px;
  /* top: 548px; */
  /* left: 296px; */
  color: #516070;
  /* position: absolute; */
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

/* 2번 영역 - 기존 위치 유지 */
.reco-overlap-4 {
  position: absolute;
  /* width: 40%; */
  /* height: 500px; */
  top: 30%;
  left: 10%;
}

.reco-ellipse-2 {
  width: 392px;
  height: 392px;
  top: 57px;
  left: 176px;
  border-radius: 196.23px;
  transform: rotate(135deg);
  position: absolute;
  filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

.reco-overlap-group-2 {
  position: absolute;
  width: 40%;
  height: 694px;
  top: 462px;
  left: 10%;
}

.reco-rectangle-3 {
  position: absolute;
  width: 314px;
  height: 393px;
  top: 167px;
  left: 357px;
  background-color: transparent;
  /* box-shadow: 30px 37px 59.5px #00000040; */
}

.recommended-types {
  position: absolute;
  width: 100%;
  top: -10%;
  left: 5%;
  text-align: right;
}

.reco-title {
  font-family: "Dream Orphans", Arial, sans-serif;
  font-weight: normal;
  color: #000000;
  font-size: 64px;
  letter-spacing: 0;
  line-height: normal;
  margin-bottom: 10px;
}

.reco-subtitle {
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 200;
  color: #6e6e6e;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.reco-span {
  font-family: "Dream Orphans", Arial, sans-serif;
  font-weight: normal;
  color: #000000;
  font-size: 64px;
}

.reco-text-wrapper-2 {
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 24px;
}

.reco-text-wrapper-3 {
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 200;
  color: #6e6e6e;
  font-size: 16px;
}

.reco-img {
  position: absolute;
  width: 347px;
  height: 412px;
  top: 0;
  right: 0;
  aspect-ratio: 0.84;
  box-shadow: 30px 37px 59.5px #00000040;
}

.reco-rectangle-4 {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 15%;
  align-items: flex-end;
  border-radius: 30px;
  backdrop-filter: blur(18.2px) brightness(100%);
  -webkit-backdrop-filter: blur(18.2px) brightness(100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(120, 147, 169, 0.4) 100%
  );
}

.reco-text-box {
  width: 100%;
  max-width: 428px;
  height: 50%;
  max-height: 296px;
  padding: 24px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 30px 37px 59.5px #00000040;
  /* gap: 30px; */
}

.reco-text-desc {
  width: 249px;
  /* top: 559px;
  left: -10%; */
  color: #516070;

  /* position: absolute; */
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
}

.reco-text-wrapper-4 {
  text-align: right;
}

.reco-text-wrapper-5 {
  text-align: right;
}

.reco-text-num {
  width: 110px;
  /* top: 443px;
  right: 70%; */
  font-family: "Pretendard", Arial, sans-serif;
  /* position: absolute; */
  font-weight: 700;
  color: #ffffff;
  font-size: 64px;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
}

/* 3번 영역 - 오른쪽에 독립적으로 배치 */
.reco-box {
  position: absolute;
  width: 719px;
  height: 719px;
  top: 310px;
  /* 3번 영역 위쪽에 배치 */
  left: -200px;
}

.reco-ellipse-3 {
  position: absolute;
  width: 520px;
  height: 520px;
  top: 0;
  left: 0;
  border-radius: 260px;
  filter: blur(10px);
  transform: rotate(-122deg);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

.reco-overlap-3 {
  position: absolute;
  width: 30%;
  height: 500px;
  top: 50%;
  /* 아래쪽에 배치 */
  right: 10%;
  /* 오른쪽에 배치 */
}

.reco-rectangle-7 {
  position: absolute;
  width: 359px;
  height: 444px;
  top: 0;
  right: 0;
  /* 오른쪽 정렬 */
  background-color: #d9d9d9;
  box-shadow: 30px 37px 59.5px #00000040;
}

.reco-rectangle-8 {
  position: absolute;
  /* width: 373px;
  height: 219px; */
  top: 30%;
  left: 0%;
  z-index: 1;
  align-items: flex-end;
  border-radius: 30px;
  backdrop-filter: blur(18.2px) brightness(100%);
  -webkit-backdrop-filter: blur(18.2px) brightness(100%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(103, 149, 186, 0.4) 100%
  );
}

.reco-text-wrapper-8 {
  width: 293px;
  /* top: 260px; */
  /* left: 40px; */
  color: #516070;
  text-align: right;
  /* position: absolute; */
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  z-index: 2;
}

.reco-text-wrapper-9 {
  width: 116px;
  /* top: 155px; */
  /* left: 225px; */
  font-family: "Pretendard", Arial, sans-serif;
  /* position: absolute; */
  font-weight: 700;
  color: #ffffff;
  font-size: 64px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  z-index: 2;
  text-align: right;
}

.reco-image-2 {
  position: absolute;
  width: 423px;
  height: 538px;
  top: 0;
  right: 30px;
  aspect-ratio: 0.81;
}

/* 4번 영역 - 더 아래쪽에 독립적으로 배치 */
.reco-box-2 {
  position: absolute;
  width: 586px;
  height: 586px;
  top: 370px;
  /* 3번 영역 위쪽에 배치 */
  left: -80px;
}

.reco-ellipse-4 {
  position: absolute;
  width: 416px;
  height: 416px;
  top: 0;
  left: 0;
  border-radius: 207px;
  filter: blur(10px);
  transform: rotate(20deg);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

.reco-overlap-2 {
  position: absolute;
  width: 40%;
  height: 500px;
  top: 65%;
  /* 3번보다 더 아래로 배치 */
  right: 60%;
  /* 중앙 왼쪽에 배치 */
}

.reco-rectangle-5 {
  position: absolute;
  width: 314px;
  height: 393px;
  top: 50px;
  left: 0;
  background-color: #d9d9d9;
  box-shadow: 30px 37px 59.5px #00000040;
}

.reco-rectangle-6 {
  width: 70%;
  position: absolute;
  /* width: 373px;
  height: 257px; */
  top: 40%;

  left: 105%;
  align-items: flex-start;
  /* 오른쪽에 텍스트 영역 */
  border-radius: 30px;
  backdrop-filter: blur(18.2px) brightness(100%);
  -webkit-backdrop-filter: blur(18.2px) brightness(100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(114, 171, 217, 0.4) 100%
  );
  z-index: 1;
}

.reco-text-wrapper-6 {
  width: 249px;
  /* top: 450px; */
  /* right: -365px; */
  /* 오른쪽 기준으로 배치 */
  color: #50606f;
  /* position: absolute; */
  font-family: "Pretendard", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  z-index: 2;
  text-align: left;
}

.reco-text-wrapper-7 {
  width: 125px;
  /* top: 310px;
  right: -210px; */
  /* 오른쪽 기준으로 배치 */
  font-family: "Pretendard", Arial, sans-serif;
  /* position: absolute; */
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  z-index: 2;
  text-align: left;
}

.reco-image-3 {
  position: absolute;
  width: 360px;
  height: 443px;
  top: 326px;
  right: -200px;
  /* 오른쪽에 이미지 배치 */
  aspect-ratio: 0.79;
}

@media (max-width: 768px) {
  .recommended-types-section {
    min-height: auto;
    /* padding: 60px 0; */
  }

  .recommended-container {
    width: 100%;
    min-height: auto;
    height: auto;
    padding: 0 20px 50px 20px;
    display: flex;
    flex-direction: column;
  }

  /* 모바일용 새로운 타이틀 추가 */
  .recommended-container::before {
    content: "Recommended types";
    display: block;
    width: 100%;
    text-align: center;
    font-family: "Dream Orphans", Arial, sans-serif;
    font-weight: normal;
    color: #000000;
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
    margin-bottom: 10px;
    order: -2;
  }

  /* 모바일용 서브타이틀 추가 */
  .recommended-container::after {
    content: attr(data-i18n);
    display: block;
    width: 100%;
    text-align: center;
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 200;
    color: #6e6e6e;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.6;
    white-space: pre-line;
    margin-bottom: 60px;
    order: -1;
  }

  /* 섹션 제목만 위로 - order 사용 */
  .reco-ellipse-2 {
    display: none;
  }

  .reco-overlap-group-2 {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    margin-bottom: 0;
    order: 2;
  }

  .reco-rectangle-3 {
    display: none;
  }

  .recommended-types {
    display: none;
  }

  .reco-title {
    display: none;
  }

  .reco-subtitle {
    display: none;
  }

  /* 2번 항목은 원래 순서 유지 */
  .reco-overlap-group-2 .reco-item {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    /* margin-bottom: 80px; */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 모든 라인 이미지 숨김 */
  .reco-line,
  .reco-line-2,
  .reco-line-3 {
    display: none;
  }

  /* 모든 ellipse 숨김 */
  .reco-ellipse,
  .reco-ellipse-3,
  .reco-ellipse-4 {
    display: none;
  }

  .reco-box,
  .reco-box-2 {
    display: none;
  }

  /* 1번 항목 */
  .reco-overlap {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    /* margin-bottom: 80px; */
    order: 1;
  }

  .reco-overlap-group {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 1번 항목의 독립 텍스트 숨김 */
  .reco-overlap .reco-text-wrapper,
  .reco-overlap .reco-p {
    display: none !important;
  }

  .reco-image {
    position: relative;
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    transform: none;
    margin-bottom: 20px;
    box-shadow: 20px 25px 40px #00000040;
    object-fit: cover;
    order: 1;
  }

  .reco-rectangle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    height: 150px;
    top: -50px;
    left: 0;
    border-radius: 30px;
    backdrop-filter: blur(18.2px) brightness(100%);
    -webkit-backdrop-filter: blur(18.2px) brightness(100%);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(120, 147, 169, 0.4) 100%
    );
    padding: 20px;
    box-sizing: border-box;
    order: 2;
    z-index: 5;
  }

  .reco-rectangle::after {
    content: "01";
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    text-align: center;
    order: 1;
  }

  .reco-rectangle::before {
    content: attr(data-i18n);
    white-space: pre-line;
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #516070;
    text-align: center;
    line-height: 1.4;
    margin-top: 10px;
    order: 2;
  }

  .reco-rectangle-2 {
    display: none;
  }

  /* 2번 항목의 독립 텍스트 숨김 */
  .reco-overlap-group-2 .reco-text-wrapper-4,
  .reco-overlap-group-2 .reco-text-wrapper-5 {
    display: none !important;
  }

  .reco-img {
    position: relative;
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    transform: none;
    margin-bottom: 20px;
    box-shadow: 20px 25px 40px #00000040;
    object-fit: cover;
    order: 1;
  }

  .reco-rectangle-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    height: 150px;
    top: -50px;
    left: 0;
    border-radius: 30px;
    backdrop-filter: blur(18.2px) brightness(100%);
    -webkit-backdrop-filter: blur(18.2px) brightness(100%);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(120, 147, 169, 0.4) 100%
    );
    padding: 20px;
    box-sizing: border-box;
    order: 2;
  }

  .reco-rectangle-4::after {
    content: "02";
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    text-align: center;
    order: 1;
  }

  .reco-rectangle-4::before {
    content: attr(data-i18n);
    white-space: pre-line;
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #516070;
    text-align: center;
    line-height: 1.4;
    order: 2;
  }

  /* 3번 항목 */
  .reco-overlap-3 {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    right: 0;
    left: 0;
    /* margin-bottom: 80px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 3;
  }

  /* 3번 항목의 독립 텍스트 숨김 */
  .reco-overlap-3 .reco-text-wrapper-8,
  .reco-overlap-3 .reco-text-wrapper-9 {
    display: none !important;
  }

  .reco-image-2 {
    position: relative;
    width: 300px;
    height: 250px;
    top: 0;
    right: 0;
    left: 0;
    transform: none;
    margin-bottom: 20px;
    box-shadow: 20px 25px 40px #00000040;
    object-fit: cover;
    order: 1;
  }

  .reco-rectangle-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    height: 150px;
    top: -50px;
    left: 0;
    border-radius: 30px;
    backdrop-filter: blur(18.2px) brightness(100%);
    -webkit-backdrop-filter: blur(18.2px) brightness(100%);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(103, 149, 186, 0.4) 100%
    );
    padding: 20px;
    box-sizing: border-box;
    order: 2;
  }

  .reco-rectangle-8::after {
    content: "03";
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    text-align: center;
    order: 1;
  }

  .reco-rectangle-8::before {
    content: attr(data-i18n);
    white-space: pre-line;
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #516070;
    text-align: center;
    line-height: 1.4;
    order: 2;
  }

  /* 4번 항목 */
  .reco-overlap-2 {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    /* margin-bottom: 80px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 4;
  }

  /* 4번 항목의 독립 텍스트 숨김 */
  .reco-overlap-2 .reco-text-wrapper-6,
  .reco-overlap-2 .reco-text-wrapper-7 {
    display: none !important;
  }

  .reco-rectangle-5 {
    display: none;
  }

  .reco-image-wrapper {
    position: relative;
    width: 300px;
    height: 250px;
    overflow: hidden;
    box-shadow: 20px 25px 40px #00000040;
    margin-bottom: 20px;
  }

  .reco-image-3 {
    position: absolute;
    width: 120%;
    height: auto;
    top: 0;
    right: 0;
    left: 0;
    transform: none;
    object-fit: cover;
    order: 1;
  }

  .reco-rectangle-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    height: 150px;
    top: -50px;
    right: 0;
    left: 0;
    border-radius: 30px;
    backdrop-filter: blur(18.2px) brightness(100%);
    -webkit-backdrop-filter: blur(18.2px) brightness(100%);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(114, 171, 217, 0.4) 100%
    );
    padding: 20px;
    box-sizing: border-box;
    order: 2;
  }

  .reco-rectangle-6::after {
    content: "04";
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 48px;
    text-align: center;
    order: 1;
  }

  .reco-rectangle-6::before {
    content: attr(data-i18n);
    white-space: pre-line;
    font-family: "Pretendard", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #50606f;
    text-align: center;
    line-height: 1.4;
    order: 2;
  }

  .reco-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* 라벨(상자 속 제목): Pretendard_semibold_32 */
  .benefit-card-label p {
    word-break: keep-all;
  }
}

/* 섹션은 sticky 방식 그대로 사용 (height는 JS에서 패널수×100vh로 설정 중) */
.reaction-section {
  position: relative;
  display: flex;
  justify-content: center;
}

/* sticky 뷰포트 유지 */
.reaction-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: 1920px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 16px;
}

.reaction-sticky header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.reaction-sticky header h1 {
  font-family: "MaruBuri", serif;
  font-size: 36px;
  font-weight: 700;
}

.reaction-sticky header p {
  font-family: "Pretendard", serif;
  font-size: 22px;
  font-weight: 400;
}

.reaction-count {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.reaction-count-circle {
  position: relative;
  flex: 3;
  width: auto;
  height: 100%;
  background: url("/home_assets/img/main/skin/reaction-count.png") no-repeat
    center / contain;
}

/* 패널 겹쳐놓고 active만 보이기 — 전환 애니메이션 제거 */
.reaction-content {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;

  pointer-events: none;
  /* 숨김 패널 클릭 방지(선택) */
}

.reaction-content.active {
  opacity: 1;
  /* 즉시 표시 */
  pointer-events: auto;
  /* Ellipse 7 */
}

.reaction-image {
  font-size: 32px;
}

.reaction-content p {
  font-size: 18px;
}

.react-list {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
  font-size: 24px;
  position: relative;
  z-index: 1;
  list-style: none;
}

.react-list.shown {
  opacity: 1;
}

/* .react-list.current {
  opacity: 1;
} */
.react-list::before {
  position: absolute;
  content: "";
  top: -80px;
  left: 10%;
  font-size: 96px;
  color: #f4f4f4;
  z-index: -1;
}

.react-list[data-step="0"]::before {
  content: "01";
}

.react-list[data-step="1"]::before {
  content: "02";
}

.react-list[data-step="2"]::before {
  content: "03";
}

.react-list.active::after {
  position: absolute;
  left: 25%;
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 50.48%,
    rgba(144, 188, 255, 0.35) 91.35%
  );
  filter: blur(10px);

  border-radius: 50%;
}

.react-list li::before {
  content: url("/home_assets/img/main/skin/icon/check.svg");
  color: #ff8800;
  padding-right: 5px;
}

.caution {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: clamp(14px, 1vw, 16px);
}

/* 메인 섹션 스타일 */
.proven-safety-section {
  position: relative;
  padding: 80px 0;
  background: #ffffff;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}

/* 배경 도형 */
.background-shape {
  position: absolute;
  top: 50%;
  right: -200px;
  transform: translateY(-50%);
  width: 800px;
  height: 800px;
  background-color: #f0f3fa;
  border-radius: 50%;
  z-index: 1;
}

/* 컨테이너 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* 컨텐츠 래퍼 */
.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* 텍스트 컨텐츠 */
.text-content {
  flex: 1;
  max-width: 400px;
}

.section-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 40px;
  color: #333333;
  margin: 0 0 30px 0;
  line-height: 1.2;
}

.section-description {
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #666666;
  margin: 0;
  line-height: 1.6;
  word-break: keep-all;
}

/* PS 섹션 기본 */
.ps-proven-safety-section {
  height: 100vh;
  margin-top: 120px;
  position: relative;
  background: #fff;
  padding: 50px 16px;
  overflow: hidden;
}

/* 컨테이너 */
.ps-container {
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* 레이아웃 */
.ps-layout {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* 좌측 영역 */
.ps-left {
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.ps-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 비율 유지하면서 맞추기 */
  display: block;
}

/* 슬라이드 커스텀 */
.swiper {
  height: 100%;
}

.swiper-3d .swiper-slide-shadow {
  display: none;
}

.swiper-slide-next {
  transform: rotateZ(0) !important;
}

.swiper-slide.swiper-slide-prev {
  transform: translate3d(20px, 20px 0) rotateZ(0) !important;
}

.swiper-cards .swiper-slide {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 우측 인증서 영역 */
.ps-right {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-left: 1px solid #d3cdcd;
  padding-left: 5%;
}

.ps-title-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 44px;
}

.ps-title {
  font-family: "Dream Orphans", sans-serif;
  /* 폰트 변경 */
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #333;
  text-align: right;
}

/* 캡션 */
.ps-caption {
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: #666;
  text-align: center;
  word-break: keep-all;
}

/* 인증서 2장: 가로 나란히 */

/* 공통 인증서 스타일 */
.ps-paper {
  width: 60%;
  height: auto;
  display: block;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* 애니메이션 초기 상태 (트리거 전) */
  /* opacity: 0; */
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* 순차 등장 딜레이 */
.ps-paper-1 {
  /* 절대좌표 해제 */
  left: auto;
  right: auto;
  top: auto;
  z-index: 2;
  animation-delay: 0.1s;
  object-fit: contain;
}

.ps-paper-2 {
  /* 절대좌표 해제 */
  left: auto;
  right: auto;
  top: auto;
  z-index: 3;
  animation-delay: 0.35s;
  object-fit: contain;
}

@keyframes ps-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 모션 최소화 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .ps-paper {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== 장점 섹션 ===== */
.benefit-section {
  --card-bg: rgba(244, 244, 244, 0.5);
  --label-bg: #ffffff;
  /* 상자 속 텍스트박스 */
  --label-bd: #b4b4b4;
  /* 텍스트박스 테두리 */
  --badge-bd: #91a8d6;
  /* 번호 배지 외곽선(톤다운 블루) */
  padding: 60px 0 40px;
  background: #fff;
  margin-top: 240px;
}

/* 컨테이너(독립 사용) */
.benefit-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 제목: MaruBuri_bold_32 */
.benefit-title {
  font-family: "MaruBuri", serif;
  font-size: 32px;
  line-height: 1.5;
  color: #111;
  margin: 0 0 72px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.benefit-title h2 {
  font-family: "Noto Serif KR", serif;
  font-size: 32px;
  font-weight: 400;
}

.benefit-title h2 .r {
  font-family: "Noto Serif KR", serif;
}

.benefit-title h2 .r::after {
  content: "\00AE";
}

.benefit-title h1 {
  font-family: "Oranienbaum", serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 111px;
  text-align: center;
  letter-spacing: -0.04em;

  color: #000000;
}

/* 3열 그리드 */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(213px, 1fr));
  align-items: stretch;
  justify-content: space-between;
  gap: 5%;
}

/* 카드 */
.benefit-card {
  max-width: 435px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 30%;
  /* 줄 바꿈 시 크기 유지 */
  /* padding: 100px 28px 36px; */
  gap: 16px;
}

/* 라벨(상자 속 제목): Pretendard_semibold_32 */
.benefit-card-title {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  /* SemiBold */
  font-size: 32px;
  margin: 0;
}

/* 기존 .benefit-badge 스타일은 전부 제거하고 아래로 교체 */
.benefit-badge {
  position: relative;
  width: 119px;
  height: 58px;
  display: inline-block;
  background: #ffffff;
  box-shadow: 6px 8px 4px rgba(0, 0, 0, 0.25);
  border-radius: 36px;
  background: #f0f3fa;
  padding: 24px;
}

.benefit-badge .bb-mid {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 93%;
  height: 94%;
  border-radius: 36px;
  background: #ffffff;
  border: none;
  z-index: 2;
  /* Rectangle 344 */
  box-shadow: 6px 8px 4px rgba(0, 0, 0, 0.25);
}

/* 숫자: SF_HambakSnow_Extrabold_40, 중앙정렬 */
.benefit-badge .bb-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "SF HambakSnow", cursive;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;

  color: #000;

  z-index: 4;
  pointer-events: none;
}

/* 하단 텍스트 박스: Pretendard_extralight_20 */
.benefit-card-label {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 148px;
  height: 100%;
  border-radius: 40px;
  padding: 30px;
  /* width: 405px; */
  box-shadow: inset 6px 4px 4px #00000040;
  color: #000000;
  /* Group 142 */

  font-weight: 200;
  font-size: 20px;
  line-height: 1.7;

  box-sizing: border-box;
}

.benefit-card:nth-of-type(odd) .benefit-card-label {
  color: #000;
  background: url("/home_assets/img/main/skin/benefit-card-odd.png") no-repeat
      center/cover,
    #fff;
}

.benefit-card:nth-of-type(even) .benefit-card-label {
  color: #fff;
  background: url("/home_assets/img/main/skin/benefit-card-even.png") no-repeat
      center/cover,
    #b0bbd5;
}

@media (max-width: 768px) {
  .benefit-section {
    margin: 0;
  }
}

/* 슬라이드 닥터 스타일 */
:root {
  --sd-card-w: 495px;
  --sd-card-h: 650px;
  --sd-gap: 30px;
  --sd-gap-reduce: 130px;
  /* 2↔3 간격 줄이기 */
  --sd-scale-sm: 0.734;
}

/* 의료진 슬라이더 섹션 */
.sd-doctor-slider-section {
  margin-top: 200px;
  margin-bottom: 200px;
  padding: 0 0px 80px 0px;
  overflow: hidden;
  /* height: 100dvh; */
}

/* 슬라이더 컨테이너 */
.sd-slider-container {
  max-width: 1920px;
  /* padding-right: 20px; */
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8%;
}

.sd-active {
  position: relative;
  overflow: hidden;
  flex: 1;
  width: 50%;
  aspect-ratio: 888/1116;
  /* height: 100%; */
}

.sd-doctor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  object-fit: cover;
  object-position: top;
}

.sd-doctor.active {
  opacity: 1;
  z-index: 1;
}

.sd-container-right {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 섹션 헤더 */
.sd-section-header {
  text-align: center;
  width: 100%;
  z-index: 5;
  text-align: left;
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 150px;
}

.sd-section-subtitle {
  color: #000;
  font-family: "Oranienbaum", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(88px, 3vw, 96px);
  line-height: 111px;
  letter-spacing: -0.04em;
}

.sd-section-title {
  font-size: clamp(28px, 1vw, 32px);
  color: #000;
  font-weight: 400;
  font-family: "Noto Serif KR", serif;
  line-height: 1.3;
}

.sd-slider-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex: 3;
}

/* 슬라이드 기본 스타일 */
.sd-slide {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.sd-slide.active .sd-doctor-image-wrapper {
  filter: blur(0);
}

.sd-doctor-image-wrapper {
  width: 100%;
  overflow: hidden;
  background: white;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  filter: blur(5px);
}

.sd-doctor-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 의사 정보 박스 */
.sd-doctor-info-box {
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;

  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.sd-doctor-role {
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #000;
  margin-bottom: 8px;
}

.sd-doctor-name {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #000;
  margin-bottom: 20px;
}

.sd-doctor-desc {
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #000;
  line-height: 1.4;
}

.mo-doctor-list {
  display: none;
}

/* 768px 반응형 */
@media (max-width: 768px) {
  .sd-doctor-slider-section {
    /* display: none; */
    padding: 0;
  }

  .mo-sd-doctor-section {
    /* display: inline; */
  }

  /* .mo-sd-doctor-section img {
    width: 100%;
  } */
  .sd-container-right {
    width: 100%;
  }

  .sd-section-header {
    width: 100%;
  }

  .sd-slider-container {
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 8px; */
  }

  .sd-active,
  .sd-container-right .sd-doctor-info-box,
  .sd-slider-wrapper {
    display: none;
  }

  .mo-doctor-list {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .mo-sd-doctor-info-box {
    padding: 16px;
    width: 100%;
  }

  .doctor {
    width: 100%;
  }

  .doctor img {
    width: 80%;
  }

  .doctor .sd-doctor {
    position: static;
    opacity: 1;
  }

  .doctor .sd-doctor-name {
    margin-bottom: 34px;
  }

  .doctor .sd-doctor-desc {
    width: 100%;
    text-align: center;
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    margin-bottom: 76px;
  }

  .doctor:nth-child(2n) {
    text-align: end;
  }
  .sd-section-header {
    padding: 0 24px;
  }
  .sd-section-title {
    font-size: 32px;
    color: #000;
    font-weight: 400;
    font-family: "Noto Serif KR", serif;
    line-height: 1.3;
    word-break: keep-all;
  }

  .cautions-panel {
    word-break: keep-all;
  }
}

.boosting-section {
  position: relative;
  width: 100%;
  height: 200vh;
  min-height: 100%;
  background: #ffffff;
  padding: 80px 20px 120px;
  /* overflow: hidden; */
}

.boosting-container {
  position: sticky;
  top: 0;
  max-width: 1920px;
  height: 100vh;
  margin: 0 auto;
  /* text-align: center; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 5%;
  padding: 0 60px;
}

.boosting-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  height: 100%;
}

.boosting-title {
  color: #111;
}

.boosting-subTitle {
  font-size: 12px;
  font-weight: 100;
  font-size: 12px;
  line-height: 14px;
  color: #000000;
  margin-bottom: 40px;
}

.boosting-sub {
  color: #555;
}

.boosting-list {
  width: 80%;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.boosting-list h1 {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.04em;
  will-change: transform;
  transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.boosting-list figurecaption {
  font-style: normal;
  font-weight: 100;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.04em;
  will-change: transform;
  transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.boosting-list p {
  font-style: normal;
  font-weight: 100;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.04em;
  will-change: transform;
  transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  word-break: keep-all;
}

.boosting-list.active h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.04em;
}

.boosting-list.active figurecaption {
  font-style: normal;
  font-weight: 100;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.04em;
}

.boosting-list.active p {
  font-style: normal;
  font-weight: 100;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.04em;
}

.boosting-rejuran {
  border-bottom: 1px solid #c8c8c8;
}

.boosting-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 50%;
  height: 100%;
  gap: 5%;
  padding-bottom: 250px;
}

.boosting-item {
  flex: 1;
  width: 50%;
  height: 50%;
  animation: floatY 4s ease-in-out infinite;
  --img-shift: 0px;
  display: flex;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.boosting-item img {
  height: auto;
}

@keyframes floatY {
  0% {
    transform: translateY(var(--img-shift));
  }

  50% {
    transform: translateY(calc(var(--img-shift) - 14px));
  }

  100% {
    transform: translateY(var(--img-shift));
  }
}

.boosting-item.active {
  width: 100%;
  height: 60%;
}

.rejuran-img {
  position: relative;
  width: 100%;
  /* height: 100%; */
}

.boosting-item::before {
  display: block;
  position: absolute;
  content: "";
  width: 174px;
  height: 18px;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.25) 6.25%,
    rgba(0, 0, 0, 0) 91.35%
  );
}

.boosting-item.active::after {
  position: absolute;
  top: -5%;
  right: 10%;
  font-family: "Linux Biolinum Outline", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 96px;
  line-height: 109px;
  text-align: center;
  z-index: 0;
  color: #fff;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,
    1px 1px 0 black;
}

.rejuran-img.active::after {
  content: "REJURAN";
}

.rejuran-img img {
  position: relative;
  z-index: 1;
}

.olidia-img {
  position: relative;
  padding-top: 40px;
}

.olidia-img.active::after {
  content: "OLIDIA";
}

.olidia-img img {
  position: relative;
  z-index: 1;
}

/*=== 부스팅 ===*/
.do-regular-48 {
  font-family: "Dream Orphans", sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
}

.pretendard-el-20 {
  font-family: "Pretendard", sans-serif;
  font-weight: 200;
  font-size: 20px;
  line-height: 1.2;
}

.pretendard-bold-24 {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .boosting-section {
    padding: 40px 16px;
    height: auto !important;
    overflow-x: hidden;
  }

  .boosting-container {
    width: 100%;
    padding: 0;
    gap: 0;
    height: auto;
    position: relative;
  }

  .boosting-left {
    flex: 2;
    width: 65%;
    padding-right: 10px;
  }

  .boosting-title {
    font-size: 28px;
  }

  .boosting-subTitle {
    white-space: normal;
    font-size: 12px;
    word-break: keep-all;
    margin: 0;
  }

  .boosting-sub {
    font-size: 16px;
    white-space: normal;
    line-height: 120%;
    word-break: keep-all;
  }
  .boosting-sub br {
    display: none;
  }

  .boosting-list {
    width: 100%;
    padding: 20px 0;
  }
  .boosting-list.active h1 {
    font-size: 24px;
  }
  .boosting-list.active figurecaption {
    font-size: 14px;
  }
  .boosting-list.active p {
    font-size: 16px;
  }
  .boosting-right {
    flex: 1;
    width: 35%;
    height: auto;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
    gap: 100px;
    margin-top: 80px;
  }

  .boosting-item {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .boosting-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
  }

  .boosting-item.active {
    width: 80%;
    /* 기존: 100%, 변경 안함 = 80% 크기 유지 */
    height: auto;
    /* 기존: auto, 변경 안함 */
  }

  .boosting-item.active::after {
    font-size: 24px;
    top: -35%;
    right: 5%;
  }

  .olidia-img {
    justify-content: flex-start;
    height: 100%;
    padding: 0;
  }
}

@media (max-width: 768px) {
  /* reaction */
  .reaction-sticky header h1 {
    font-size: 24px;
  }

  .reaction-sticky header p {
    font-size: 16px;
  }

  .reaction-count {
    flex-direction: column;
    height: 100%;
  }

  .reaction-count-circle {
    width: 70%;
    /* height: 100%; */
    flex: 2;
  }
  .reaction-image {
    font-size: 24px;
  }
  .reaction-content p {
    font-size: 20px;
  }
  .react-list {
    flex: 1;
    font-size: 14px;
  }

  .react-list::before {
    content: "";
    left: 20%;
    font-size: 82px;
    top: -10%;
  }

  .react-list.active::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .caution {
    text-align: center;
    margin-top: 50px;
    justify-content: center;
    font-size: 12px;
    word-break: keep-all;
  }

  /* benefit */
  .benefit-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .benefit-title {
    margin: 0;
  }
  .benefit-title h2 {
    font-size: 22px;
  }

  .benefit-title h1 {
    font-size: 72px;
  }

  .benefit-grid {
    width: 80%;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: none;
    justify-content: center;
    align-items: center;
    gap: 35px;
  }

  .benefit-card-label {
    font-size: 18px;
  }

  .benefit-card-title {
    font-size: 22px;
  }

  .sd-doctor-slider-section {
    width: 100%;
    /* padding: 16px; */
    max-width: 100%;
    margin-bottom: 0;
  }

  /* proven safety */
  .ps-proven-safety-section {
    height: 100%;
  }

  .ps-container {
    padding: 0;
  }

  .ps-layout {
    /* height: 100%; */
    flex-direction: column;
  }

  .ps-left {
    order: 2;
    overflow: none;
  }

  .ps-title-box {
    gap: 22px;
  }

  .ps-title {
    font-size: 32px;
  }

  .ps-caption {
    font-size: 18px;
  }

  .ps-right {
    order: 1;
    border: none;
    padding: none;
  }

  .swiper-cards .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }

  .ps-paper {
    height: 100%;
    margin-bottom: 60px;
  }
}

/* skin-rs 섹션  */
/* ===== Base Stage (1920x1080 캔버스 감각) ===== */
.sr-skin-response {
  background: #fff;
}

.sr-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 1080px;
  overflow: hidden;
}

/* ===== Blue blurred blobs ===== */
.sr-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  background: radial-gradient(
    closest-side,
    rgba(131, 172, 232, 0.45),
    rgba(131, 172, 232, 0) 70%
  );
}

.sr-blob-lg {
  width: 520px;
  height: 520px;
  top: -80px;
  left: -140px;
  border-radius: 260px;
  transform: rotate(-122deg);
  filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

.sr-blob-mid {
  width: 340px;
  height: 340px;
  top: 110px;
  left: 640px;
  border-radius: 170px;
  transform: rotate(-15deg);
  filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

.sr-blob-sm {
  width: 172px;
  height: 172px;
  top: 430px;
  left: 610px;
  border-radius: 86px;
  transform: rotate(122deg);
  filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
}

/* ===== Title ===== */
.sr-content {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sr-title-block {
  /* position: absolute; */
  top: 30%;
  right: 50%;
  text-align: left;
}

.sr-title {
  margin: 0 0 10px 0;
  font-family: "Dream Orphans-Regular", "Dream Orphans", serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  color: #111;
  text-align: right;
  padding-right: 100px;
}

.sr-subtitle {
  margin: 0;
  font-family: "Pretendard-ExtraLight", "Pretendard", system-ui, sans-serif;
  font-weight: 200;
  font-size: 24px;
  color: #333;
  line-height: 1.4;
  text-align: right;
  padding-right: 100px;
}

/* ===== Bars ===== */
.sr-bars {
  /* position: absolute; */
  top: 210px;
  right: 30%;
  display: flex;
  gap: 26px;
  align-items: flex-end;
}

.sr-bar {
  position: relative;
  width: 32px;
  height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.sr-stick {
  position: relative;
  width: 18px;
  height: 550px;
  border-radius: 45px;
  background: linear-gradient(
    180deg,
    rgba(200, 200, 200, 0.9) 0%,
    rgba(200, 200, 200, 0.6) 60%,
    rgba(200, 200, 200, 0) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /* 게이지가 막대 안에서만 보이도록 */
}

/* 게이지: 아래에서 위로 채워짐 */
.sr-gauge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* ⬅ 기준을 top으로 */
  bottom: auto;
  /* ⬅ bottom 사용 안 함 */
  height: 0%;
  /* 시작: 0% (빈 상태) */
  background: linear-gradient(
    180deg,
    #a4c9fa 0%,
    rgba(164, 201, 250, 0.85) 100%
  );
  box-shadow: inset 0 8px 14px rgba(255, 255, 255, 0.35);
  transition: height 1.2s ease-out;
  will-change: height;
}

/* 라벨 */
.sr-label {
  position: absolute;
  top: 30px;
  left: 30px;
  transform: translateY(-12px);
  font-family: "Pretendard-Light", "Pretendard", system-ui, sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #111;
  letter-spacing: 0.02em;
  /* writing-mode: vertical-rl; */
  text-orientation: mixed;
  user-select: none;
  text-align: center;
}

/* 막대별 약간의 불투명도(회색 스틱) */
.sr-bar:nth-child(1) .sr-stick {
  opacity: 0.9;
}

.sr-bar:nth-child(2) .sr-stick {
  opacity: 0.88;
}

.sr-bar:nth-child(3) .sr-stick {
  opacity: 0.86;
}

.sr-bar:nth-child(4) .sr-stick {
  opacity: 0.84;
}

.sr-bar:nth-child(5) .sr-stick {
  opacity: 0.82;
}

.sr-bar:nth-child(6) .sr-stick {
  opacity: 0.8;
}

.sr-bar:nth-child(7) .sr-stick {
  opacity: 0.78;
}

/* === 채우기 트리거 상태 === */
.sr-stage.is-filling .sr-gauge {
  height: 100%;
}

.sr-stage.is-filled .sr-gauge {
  height: 100%;
}

.sr-stage.is-emptying .sr-gauge {
  height: 0%;
}

/* 게이지 채우기 지연(스태거) */
.sr-stage.is-filling .sr-bar:nth-child(1) .sr-gauge {
  transition-delay: 0ms;
}

.sr-stage.is-filling .sr-bar:nth-child(2) .sr-gauge {
  transition-delay: 100ms;
}

.sr-stage.is-filling .sr-bar:nth-child(3) .sr-gauge {
  transition-delay: 200ms;
}

.sr-stage.is-filling .sr-bar:nth-child(4) .sr-gauge {
  transition-delay: 300ms;
}

.sr-stage.is-filling .sr-bar:nth-child(5) .sr-gauge {
  transition-delay: 400ms;
}

.sr-stage.is-filling .sr-bar:nth-child(6) .sr-gauge {
  transition-delay: 500ms;
}

.sr-stage.is-filling .sr-bar:nth-child(7) .sr-gauge {
  transition-delay: 600ms;
}

/* === 스크롤 락 시 바디 처리 === */
body.sr-lock {
  overflow: hidden;
  overscroll-behavior: contain;
  /* 모바일 튕김 방지 */
  touch-action: none;
}

@media (max-width: 768px) {
  .sr-stage {
    height: 820px;
  }

  .sr-title {
    margin: 10px 0;
    padding: 0;
  }

  .sr-subtitle {
    padding: 0;
  }

  .sr-content {
    position: static;
    flex-direction: column;
    transform: none;
    width: 100%;
    padding: 16px;
  }
  .sr-bars {
    padding: 0 26px;
    gap: 12px;
  }

  .sr-label {
    font-size: 16px;
  }
}

/*=== 시너지 ===*/
.synergy-section {
  padding-top: 80px;
  position: relative;
  overflow: hidden;
  background: #fbfafa url("/home_assets/img/main/skin/synergy_background.png")
    no-repeat center / cover;
  min-height: 1089px;
}

.synergy-head {
  text-align: center;
  margin-bottom: 120px;
  position: relative;
  z-index: 1;
}

.synergy-head > * {
  position: relative;
  z-index: 1;
}

.synergy-title {
  font-family: "Dream Orphans", sans-serif;
  font-size: 42px;
  line-height: 1.2;
}

.synergy-sub {
  color: #666;
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 18px;
  margin-top: 10px;
}

.pretendard-light-16 {
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: #000;
}

.synergy-slider {
  padding-top: 44px;
  position: relative;
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
}

.synergy-track {
  --gap: 148px;
  display: flex;
  gap: var(--gap);
  transition: transform 0.6s ease;
  will-change: transform;
  position: relative;
  z-index: 1;
}

.synergy-track.notransition {
  transition: none;
}

/* 한 화면에 3개 */
.synergy-card {
  flex: 0 0 calc((100% - var(--gap) * 2) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-box {
  background: #fbfafa;
  border: 1px dashed #adadad;
  border-radius: 24px;
  overflow: visible;
  position: relative;
  height: 430px;
  display: flex;
  flex-direction: column-reverse;
  transition: height 0.35s ease, box-shadow 0.25s ease;
}

.card-box:hover {
  height: 480px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* 상단 흰색 직사각형 로고 박스 */
.card-logo {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: #fff;
  border: none;
  border-radius: 12px;
  width: 300px;
  height: 110px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-sizing: border-box;
}

.card-logo img {
  width: auto;
  display: block;
  object-fit: contain;
}

/* 이미지 영역: 기본 크게, 호버 시 축소 */
.card-image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 12px 0;
  transition: height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-info {
  overflow: hidden;
  height: 0;
  padding: 0 30px;
  opacity: 0;
  transform: translateY(8px);
  transition: height 0.35s ease, padding 0.35s ease, opacity 0.25s ease,
    transform 0.25s ease;
}

.card-box:hover .card-image {
  height: 0;
  opacity: 0;
  padding: 0;
}

.card-box:hover .card-info {
  color: #000;
  text-align: center;
  height: 100%;
  /* 카드 높이 증가분 전체 사용 */
  padding: 80px 30px 30px;
  opacity: 1;
  transform: translateY(0);
}

.card-caption {
  margin-top: 14px;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  color: #111;
  text-align: center;
  font-size: 24px;
}

/* 768px 반응형 */
@media (max-width: 768px) {
  /* 기존 synergy-section 숨김 */
  .synergy-section {
    display: none;
  }

  /* 모바일 Synergy 섹션 */
  .mo-synergy-section {
    display: block;
    padding: 60px 20px;
    background: #fbfafa url("/home_assets/img/main/skin/synergy_background.png")
      no-repeat center / cover;
  }

  .mo-synergy-section .synergy-head {
    text-align: center;
    margin-bottom: 60px;
  }

  .mo-synergy-section .synergy-title {
    font-family: "Dream Orphans", sans-serif;
    font-size: 28px;
    line-height: 1.2;
    color: #000;
  }

  .mo-synergy-section .synergy-sub {
    font-family: "Pretendard", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    word-break: keep-all;
  }

  /* 카드 리스트 */
  .mo-synergy-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  /* 개별 카드 */
  .mo-synergy-item {
    width: 100%;
    max-width: 400px;
  }

  /* 로고 (카드 위에 위치) */
  .mo-card-logo {
    width: 200px;
    height: 80px;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin: 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transform: translateY(40px);
  }

  .mo-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 카드 콘텐츠 (이미지 또는 텍스트) */
  .mo-card-content {
    width: 100%;
    height: 350px;
    background: #fbfafa;
    border: 1px dashed #adadad;
    border-radius: 16px;
    padding: 60px 20px 20px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    transition: height 0.3s ease;
  }

  /* 이미지 영역 */
  .mo-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .mo-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 텍스트 영역 (기본 숨김) */
  .mo-card-text {
    display: none;
    height: 100%;
    overflow-y: auto;
    text-align: center;
    word-break: keep-all;
  }

  .mo-card-text p {
    font-family: "Pretendard", sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 12px;
  }

  /* 카드 하단 타이틀 */
  .mo-card-title {
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #111;
    text-align: center;
    margin-top: 14px;
  }

  /* 활성화 상태 (텍스트 표시) */
  .mo-synergy-item.active .mo-card-content {
    height: 300px;
  }

  .mo-synergy-item.active .mo-card-image {
    display: none;
  }

  .mo-synergy-item.active .mo-card-text {
    display: block;
  }
}

/* 데스크톱에서는 숨김 */
@media (min-width: 769px) {
  .mo-synergy-section {
    display: none;
  }
}

/*=== 캡션 ===*/
.cautions-section {
  position: relative;
  padding: 240px 20px 140px;
  background: url("/home_assets/img/main/skin/caption_background.png") no-repeat
    center/cover;
  min-height: 1098px;
}

.cautions-section > * {
  position: relative;
  z-index: 1;
}

.cautions-section::before {
  content: "";
  position: absolute;
  left: -350px;
  /* 위치는 디자인에 맞게 조정 */
  top: -700px;
  width: 864px;
  /* border-radius 432px → 지름 864px */
  height: 864px;
  border-radius: 432px;
  transform: rotate(-105deg);
  background: linear-gradient(
    180deg,
    rgba(131, 172, 232, 0.4) 6%,
    rgba(255, 255, 255, 0) 91%
  );
  z-index: 0;
  pointer-events: none;
  filter: blur(10px);
}

.cautions-head {
  text-align: center;
  margin-bottom: 40px;
}

.cautions-title {
  margin: 0 0 8px;
}

.cautions-sub {
  margin: 0;
  color: #6b7280;
}

/* ===== Panel (유리패널 느낌) ===== */
.cautions-panel {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 64px;
  background: transparent;
  border: none;
  /* 경계선 제거 */
  box-shadow: none;
  /* 그림자 제거(원하면 유지 가능) */
  border-radius: 24px;
  backdrop-filter: blur(6px);
  margin-top: 200px;
}

.cautions-panel p {
  margin: 0 0 18px;
}

.cautions-panel p:last-child {
  margin-bottom: 0;
}

/* 768px 반응형 */
@media (max-width: 768px) {
  .cautions-section {
    padding: 20px 20px 60px;
    min-height: auto;
  }

  .cautions-section::before {
    left: -200px;
    top: -400px;
    width: 500px;
    height: 500px;
    border-radius: 250px;
  }

  .cautions-head {
    margin-bottom: 30px;
  }

  .cautions-title {
    font-size: 32px;
  }

  .cautions-sub {
    font-size: 16px;
  }

  .cautions-panel {
    padding: 32px 24px;
    margin-top: 60px;
    font-size: 16px;
    border-radius: 16px;
  }

  .cautions-panel p {
    margin: 0 0 16px;
    line-height: 1.6;
  }

  .cautions-panel p:last-child {
    margin-bottom: 0;
  }
}

/* Section */
.section-markvu {
  position: relative;
  padding: 120px 24px;
  background: #f8fafc;
  background-image: url("/home_assets/img/main/skin/markvu_background.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Layout */
.markvu-wrap {
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: flex-end;
}

/* Left */
.markvu-left {
  width: 40%;
  color: #111;
}

.markvu-eyebrow {
  margin: 0 0 10px;
  color: #174d9e;
  /* 174D9E */
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  /* pretendard_semibold */
  font-size: 36px;
  /* _36 */
  line-height: 1.25;
}

.markvu-title {
  margin: 0 0 88px;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  /* pretendard_semibold */
  font-size: 36px;
  line-height: 1.35;
}

.markvu-copy {
  margin: 0 0 10px;
  color: #222;
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  /* pretendard_light */
  font-size: 24px;
  line-height: 1.6;
}

.markvu-chart {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 8px;
  border-radius: 8px;
}

/* Right card */
.markvu-right {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.markvu-card {
  width: 100%;
  height: 80%;
  max-height: 812px;
  border-radius: 56px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  /* 가로 가운데 */
  align-items: center;
  /* 내부 이미지 중앙정렬 */
  overflow: hidden;
}

.markvu-device {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  height: auto;
  margin-top: 50%;
  margin-left: 30%;
  scale: 1.3;
}

@media (max-width: 768px) {
  .markvu-copy {
    word-break: keep-all;
  }
  .markvu-copy br {
    display: none;
  }
  .markvu-wrap {
    flex-direction: column;
  }

  .markvu-left {
    width: 100%;
  }

  .markvu-eyebrow {
    font-size: 26px;
  }

  .markvu-title {
    font-size: 26px;
    margin-bottom: 44px;
    word-break: keep-all;
  }
  .markvu-title br {
    display: none;
  }

  .markvu-right {
    width: 100%;
  }

  .markvu-card {
    height: 50%;
    max-height: 300px;
  }

  .markvu-device {
    scale: 1.1;
    margin-top: 60%;
  }
}