@charset "utf-8";

:root {
  /* ===== FONT SIZE ===== */
  --fs-2xs: clamp(10px, 0.52vw, 12px);
  --fs-xs: clamp(12px, 0.63vw, 14px);
  --fs-sm: clamp(14px, 0.73vw, 16px);
  --fs-base: clamp(16px, 0.83vw, 18px);
  --fs-md: clamp(18px, 0.94vw, 20px);
  --fs-lg: clamp(20px, 1.04vw, 24px);
  --fs-xl: clamp(24px, 1.25vw, 28px);
  --fs-xl2: clamp(28px, 1.46vw, 32px);
  --fs-2xl: clamp(30px, 1.67vw, 36px);
  --fs-3xl_2: clamp(32px, 1.80vw, 40px);
  --fs-3xl: clamp(34px, 1.88vw, 42px);
  --fs-4xl: clamp(42px, 2.50vw, 56px);

  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --lh-loose: 1.7;
  --ls-tight: -0.015em;
  --ls-normal: 0em;
  --ls-wide: 0.02em;

  /* ===== SPACING / PADDING / MARGIN ===== */
  --sp-2xs: clamp(4px, 0.4vw, 8px);
  --sp-xs: clamp(8px, 0.6vw, 12px);
  --sp-sm: clamp(12px, 0.9vw, 16px);
  --sp-md_2: clamp(16px, 1.3vw, 20px);
  --sp-md: clamp(16px, 1.3vw, 24px);
  --sp-lg_2: clamp(24px, 2vw, 32px);
  --sp-lg: clamp(24px, 2vw, 40px);
  --sp-xl: clamp(40px, 3vw, 64px);
  --sp-2xl: clamp(64px, 5vw, 100px);
  --sp-3xl: clamp(80px, 6vw, 120px);
  --sp-4xl: clamp(100px, 7.5vw, 144px);
  /* 🔹 최대 144px */

}


/* 서브 비주얼==================================================================== */

/* *:not(.main_banner .banner_text p) {
  word-break: keep-all;
  word-break: auto-phrase;
} */

.flex_col {
  flex-direction: column;
}

.main_banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/880;
  overflow: hidden;
}

.main_banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/laser_banner_bg.png') bottom center/cover no-repeat;
  aspect-ratio: 1920/880;
}

.main_banner .banner_inner {
  position: relative;
  width: min(1400px, 90%);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 1;
}

.main_banner .banner_text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.main_banner .banner_text h2 {
  color: var(--GREY-00, #FFF);
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-4xl);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 1.12px;
}

.main_banner .banner_text p {
  color: var(--GREY-200, #C7C7C7);
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.24px;
}

@media (max-width:1024px) {

  .main_banner {
    aspect-ratio: 1920/1200;
  }

  .main_banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/img/laser_banner_bg.png') bottom center/cover no-repeat;
    transform: scale(1.8);

  }

  .main_banner .banner_text {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
}

/* 인트로(시술 소개)==================================================================== */

.intro_wrap {
  /* height: 640px; */
  padding: 80px 0;
  background: url('/img/content_intro_bg.png') center center/cover no-repeat;
  display: flex;
  justify-content: flex-start;
}

.intro_box {
  display: flex;
  align-items: center;
}

.intro_wrap .intro_box div {
  flex: 1 1 50%;
}

.intro_wrap .tit {
  display: flex;
  flex-direction: column;
}

.intro_wrap .intro_box span {
  color: var(--primary-400, #948878);
  font-family: var(--Family-KO, Pretendard);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}

.intro_wrap .intro_box h2 {
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
}

.intro_wrap .intro_box p {
  color: var(--GREY-600, #5B5B5B);
  font-family: var(--Family-KO, Pretendard);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.1px;

  word-break: keep-all;
  word-break: auto-phrase;
  
}

/* body .intro_wrap .intro_box p {
  word-break: unset !important;
} */

.intro_line {
  width: 0.5px;
  height: 117px;
  background: rgba(0, 0, 0, 0.20);
  margin: 24px 0;
}

/* ✅ 반응형 */
@media (max-width: 768px) {
  .intro_wrap {
    height: auto;
    padding: 80px 0;
    background-position: center top;
  }

  .intro_box {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .intro_wrap .intro_box div {
    flex: 1 1 100%;
  }

  .intro_line {
    width: 1px;
    height: 80px;
    margin: 32px auto;
  }

  .intro_wrap .intro_box h2 {
    font-size: 32px;
  }

  .intro_wrap .intro_box p {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .intro_wrap {
    padding: 64px 0;
    background: url('/img/content_intro_bg.png') center top/cover no-repeat;
  }

  .intro_box {
    gap: 32px;
  }

  .intro_wrap .intro_box span {
    font-size: 18px;
  }

  .intro_wrap .intro_box h2 {
    font-size: 28px;
    line-height: 120%;
  }

  .intro_wrap .intro_box p {
    /* font-size: 16px; */
    line-height: 150%;
    text-align: left;
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: break-word;
  }

  .intro_line {
    height: 64px;
  }
}


/* 시술 원리==================================================================== */
.treatment_principle {
  display: flex;
  padding: 80px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 221px;
  align-self: stretch;
  background: #FAFAFA;
  position: relative;
}

.treatment_principle::before {
  content: 'UMEI B CLINIC';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  opacity: 0.06;
  pointer-events: none;
  color: var(--GREY-900, #222);
  text-align: right;
  font-family: Pretendard;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  display: none;
}

.treatment_principle .principle_head {
  margin-bottom: var(--sp-lg)
}

.treatment_principle .principle_title {
  color: var(--GREY-900, #222);
  text-align: center;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
}

.treatment_principle .principle_cards {
  display: flex;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.treatment_principle .principle_card {
  display: flex;
  padding: 24px 28px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--primary-100, #E4E1DD);
  background: var(--GREY-00, #FFF);
  /* aspect-ratio: 332/99; */
  /* justify-content: center; */
}

.treatment_principle .card_num {
  color: var(--primary-400, #948878);
  text-align: center;

  /* Headline 1/Medium - 24 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 31.2px */
  letter-spacing: 0.24px;
}

.treatment_principle .card_text {
  color: var(--GREY-600, #5B5B5B);
  text-align: center;

  /* Headline 1/Medium - 20 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 0.2px;
}

@media (max-width: 1024px) {
  .treatment_principle {
    padding-top: clamp(56px, 10vw, 80px);
    padding-bottom: clamp(56px, 10vw, 80px);
  }

  .treatment_principle .principle_cards {
    flex-direction: column;
    align-items: center;
  }

  .treatment_principle .principle_card {
    max-width: 100%;
    width: 100%;
    padding: clamp(20px, 5vw, 36px);
    aspect-ratio: auto;
    height: auto;
  }

  .treatment_principle::before {
    display: none;
  }

  .treatment_principle .principle_title {
    font-size: 34px;
  }
}


/* 시술 과정 ================================================================ */
.treatment_process {
  display: flex;
  padding: 80px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 221px;
  align-self: stretch;
  background: #FAFAFA;
  position: relative;
}

.treatment_process::before {
  content: 'UMEI B CLINIC';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  opacity: 0.06;
  pointer-events: none;
  color: var(--GREY-900, #222);
  text-align: right;
  font-family: Pretendard;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.treatment_process .process_head {
  margin-bottom: var(--sp-lg);
}

.treatment_process .process_title {
  color: var(--GREY-900, #222);
  text-align: center;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
}

.treatment_process .process_cards {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}

.treatment_process .process_card {
  display: flex;
  padding: 24px 28px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--primary-100, #E4E1DD);
  background: var(--GREY-00, #FFF);
  aspect-ratio: 332/99;
  max-width: 388px;
}

.treatment_process .card_num {
  color: var(--primary-400, #948878);
  text-align: center;

  /* Headline 1/Medium - 24 */
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 31.2px */
  letter-spacing: 0.24px;
}

.treatment_process .card_text {
  color: var(--GREY-600, #5B5B5B);
  text-align: center;

  /* Headline 1/Medium - 20 */
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-md);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 0.2px;
}

/* 반응형 */
@media (max-width: 1024px) {
  .treatment_process {
    padding-top: clamp(56px, 10vw, 80px);
    padding-bottom: clamp(56px, 10vw, 80px);
  }

  .treatment_process .process_title {
    font-size: 34px;
  }

  .treatment_process .process_cards {
    flex-direction: column;
    align-items: center;
  }

  .treatment_process .process_card {
    max-width: 100%;
    width: 100%;
    padding: clamp(20px, 5vw, 36px);
    aspect-ratio: auto;
    height: auto;
  }

  .process_cards .img_box {
    transform: rotate(90deg);
  }

  .treatment_process::before {
    display: none;
  }
}


/* 대표 원장 소개 ================================================================ */
.director_intro_wrap {
  width: 100%;
  display: flex;
  padding: 80px 0;
  justify-content: center;
  align-items: center;
  background: var(--primary-700, #494034);
  position: relative;
}

.director_intro_wrap::before {
  content: 'UMEI B CLINIC';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  opacity: 0.06;
  pointer-events: none;
  color: var(--GREY-00, #FFF);
  text-align: right;
  font-family: Pretendard;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.director_intro_wrap .director_intro_box {
  display: flex;
  justify-content: flex-start;
  /* 양쪽 div를 가운데 정렬 */
  align-items: center;
  gap: 11.43%;
}

.director_intro_wrap .director_intro_box>div {
  flex: 0 0 auto;
  /* 콘텐츠 크기만큼 차지하도록 변경 */
}

.director_intro_wrap .director_intro_box .img_box {
  aspect-ratio: 558/743;
  max-width: 558px;
}

.director_intro_wrap .director_intro_box .txt_box {
  display: flex;
  gap: 40px;
  flex-direction: column;
  justify-content: center
}

.director_intro_wrap .director_intro_box .txt_box .tit h2 {
  color: var(--GREY-00, #FFF);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.4px;
  padding-bottom: 12px;
}

.director_intro_wrap .director_intro_box .txt_box .tit h2 strong {
  color: var(--GREY-00, #FFF);

  /* Title 1/Medium - 40 */
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
}

.director_intro_wrap .director_intro_box .txt_box .tit span {
  color: var(--GREY-200, #C7C7C7);
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 31.2px */
  letter-spacing: 0.24px;
}

.director_intro_wrap .director_intro_box .txt_box .key {
  list-style-type: disc;
  padding-left: 2vw;
}

.director_intro_wrap .director_intro_box .txt_box .key li {
  color: var(--GREY-00, #FFF);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 30px */
  letter-spacing: 0.1px;
}

.director_intro_wrap .director_intro_box .img_box img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .director_intro_wrap {
    padding: 64px 0;
  }

  /* 배경 텍스트 크기/위치 축소 */
  .director_intro_wrap::before {
    display: none;
  }

  /* 레이아웃: 세로 스택 */
  .director_intro_wrap .director_intro_box {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}


/* 시술 효과 ================================================================ */

.treatment_effect_wrap {
  display: flex;
  padding: 80px 0;
  justify-content: center;
  align-items: center;
  background: #FAFAFA;
}

.treatment_effect_wrap .treatment_effect_box {
  display: flex;
  justify-content: flex-start;
  /* 양쪽 div를 가운데 정렬 */
  align-items: center;
  gap: 8.57%;
}

.treatment_effect_wrap .treatment_effect_box>div {
  flex: 1 1 auto;
}

.treatment_effect_wrap .treatment_effect_box .img_box {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #E4E1DD;
}

.treatment_effect_wrap .treatment_effect_box .img_box img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.treatment_effect_wrap .treatment_effect_box .txt_box h2 {
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E6E6E6;
}

.treatment_effect_wrap .treatment_effect_box .txt_box ul li {
  display: flex;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid #E6E6E6;
  align-items: center;
}

.treatment_effect_wrap .treatment_effect_box .txt_box ul li span {
  color: var(--primary-400, #948878);
  font-family: Helvetica;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 32px */
  letter-spacing: 0.64px;
}

.treatment_effect_wrap .treatment_effect_box .txt_box ul li p {
  color: #333;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 28.8px */
  white-space: nowrap;
}

@media (max-width: 1400px) {
  
  .treatment_effect_wrap {
    padding: 100px 0;
  }

  .treatment_effect_wrap .treatment_effect_box {
    gap: 6%;
  }

  .treatment_effect_wrap .treatment_effect_box .img_box {
    max-width: 400px;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box h2 {
    font-size: 36px;
    padding-bottom: 32px;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box ul li {
    gap: 32px;
    padding: 32px 0;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box ul li span {
    font-size: 28px;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box ul li p {
    font-size: 22px;
  }
}

@media (max-width: 1024px) {

  /* 전체 패딩 축소 */
  .treatment_effect_wrap {
    padding: 80px 0;
  }

  /* 세로 정렬 */
  .treatment_effect_wrap .treatment_effect_box {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .treatment_effect_wrap .treatment_effect_box>div {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  /* 이미지 */
  .treatment_effect_wrap .treatment_effect_box .img_box {
    max-width: 360px;
    width: 80%;
    margin: 0 auto;
    aspect-ratio: 1/1;
  }

  /* 텍스트 영역 */
  .treatment_effect_wrap .treatment_effect_box .txt_box h2 {
    font-size: 32px;
    padding-bottom: 24px;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box ul li {
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box ul li span {
    font-size: 24px;
    line-height: 1.2;
  }

  .treatment_effect_wrap .treatment_effect_box .txt_box ul li p {
    font-size: 20px;
    line-height: 140%;
    white-space: normal;
    /* 줄바꿈 허용 */
  }
}


/* 시술 장점 ================================================================ */
.treatment_advantage_wrap {
  width: 100%;
  background: url('/img/advantage_bg.png') center center/cover no-repeat #796A56;
  aspect-ratio: 1920/268;
  display: flex;
  padding: 80px 0;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.treatment_advantage_wrap .treatment_advantage_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 54px;
}

.treatment_advantage_wrap .txt_box h2 {
  color: var(--GREY-gr-50, #FAFAFA);
  text-align: center;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
}

.treatment_advantage_wrap .card_box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
}

.treatment_advantage_wrap .card_box .card {
  flex: 1 1 calc((100%/2) - 8px);
  display: flex;
  padding: 25px 31px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: rgba(229, 229, 229, 0.15);
  backdrop-filter: blur(20px);
  aspect-ratio: 689/80;
  max-width: 689px;
}

.treatment_advantage_wrap .card_box .card p {
  color: var(--GREY-00, #FFF);
  text-align: center;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 20px */
  letter-spacing: 0.05px;
}

@media(max-width:1024px) {
  .treatment_advantage_wrap .card_box .card {
    flex: 1 1 calc(100%);
    max-width: 1920px;
  }

  .treatment_advantage_wrap .txt_box h2 {
    font-size: 34px;
  }

  .treatment_advantage_wrap .card_box .card p {
    font-size: 18px;
  }
}


/* 추천 대상 ================================================================ */
.treatment_target_wrap {
  display: flex;
  padding: 80px 0;
  justify-content: center;
  align-items: center;
  background: #F6F5F4;
}

.treatment_target_wrap .treatment_target_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.treatment_target_wrap .treatment_target_box>div {
  flex: 1 1 50%;
}

.treatment_target_wrap .treatment_target_box .txt_box {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.treatment_target_wrap .treatment_target_box .txt_box .tit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.treatment_target_wrap .tit span {
  color: var(--primary-400, #948878);

  /* Headline 1/Medium - 20 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 0.2px;
}

.treatment_target_wrap .tit h2 {
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 40px */
  letter-spacing: -0.4px;
}

.treatment_target_wrap .txt_box ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.treatment_target_wrap .txt_box ul li {
  display: flex;
  gap: 16px;
  align-items: center;
}

.treatment_target_wrap .txt_box ul li p {
  color: var(--primary-600, #615545);
  font-family: var(--Family-KO, Pretendard);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 30px */
}

.treatment_target_wrap .img_box img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .treatment_target_wrap .treatment_target_box {
    flex-direction: column-reverse;
    gap: 40px;
    width: 70%;
  }

  .treatment_target_wrap .treatment_target_box .txt_box {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .treatment_target_wrap .tit h2 {
    font-size: 32px;
  }

}

@media (max-width: 768px) {
  .treatment_target_wrap .treatment_target_box {
    width: 100%;
  }

  .treatment_target_wrap {
    padding: 60px 0;
  }
}


/* 주의사항 ================================================================ */

.treatment_caution_wrap {
  display: flex;
  padding: 80px 0;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.treatment_caution_wrap .treatment_caution_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
}

.treatment_caution_wrap .treatment_caution_box .txt_box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
  justify-content: center;
  text-align: center;
}

.treatment_caution_wrap .treatment_caution_box .txt_box img {
  width: 100%;
  height: 40px;
  aspect-ratio: 1/1;
}

.treatment_caution_wrap .treatment_caution_box .txt_box h2 {
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
}

.treatment_caution_wrap .treatment_caution_box .card_box {
  display: flex;
  width: 100%;
  border: 1px solid var(--GREY-, #E6E6E6);
  background: var(--GREY-gr-50, #FAFAFA);
  aspect-ratio: 1440/120;
  align-items: center;
}

.treatment_caution_wrap .treatment_caution_box .card_box .card {
  display: flex;
  padding: 22px 40px;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.treatment_caution_wrap .treatment_caution_box .card_box .card p {
  color: var(--GREY-800, #2E2E2E);
  text-align: center;

  /* Body 1/Regular - 18 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  letter-spacing: 0.09px;
}

.treatment_caution_wrap .treatment_caution_box .card_box .line {
  width: 1px;
  height: 88px;
  background: #E6E6E6;
}

@media (max-width: 1024px) {
  .treatment_caution_wrap .treatment_caution_box .card_box {
    flex-direction: column;
    aspect-ratio: auto;
  }

  .treatment_caution_wrap .treatment_caution_box .txt_box h2 {
    font-size: 34px;
  }

  .treatment_caution_wrap .treatment_caution_box .card_box .line {
    width: 88px;
    height: 1px;
  }
}



/* Q&A ================================================================ */

.accordion {
  width: 100%;
  display: flex;
  padding: 80px 0;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: #FAFAFA;
}

.accordion .accordion_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border-radius: 8px;
}

.accordion .accordion_inner h2 {
  text-align: center;
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
  padding-bottom: 40px;
}

.accordion hr {
  margin: 0;
  border: 0;
  border-top: 1px solid #e5e5e5;
}

/* 버튼: 아이콘 칼럼 고정 → 레이아웃 흔들림 방지 */
.accordion .accordion_inner ul li .accordion_btn {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  cursor: pointer;
  background: #FAFAFA;
  border-radius: 6px;
  padding: 0 1rem;
  transition: background 0.25s;
  border-top: 1px solid var(--GREY-, #E6E6E6);
  border-bottom: 1px solid var(--GREY-, #E6E6E6);
  padding: 16px 20px;
}

.accordion .accordion_inner ul li .accordion_btn:hover {
  background: #f9f9f9;
}

.toggle_btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.toggle_btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-right: 16px;
}

/* 패널: display:none 대신 hidden + height 트랜지션 */
.accordion .accordion_inner ul li .accordion_content {
  overflow: hidden;
  height: 0;
  transition: height 0.35s ease;
  border-bottom: 1px solid var(--GREY-, #E6E6E6);
  background: var(--GREY-70, #F6F6F6);
  will-change: height;
}

.accordion .accordion_inner ul li .accordion_btn h3 {
  color: var(--GREY-900, #222);
  text-align: left;

  /* Q&A 질문 : 18px */
  font-family: var(--Family-KO, Pretendard);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.09px;
}

/* 실제 패딩은 내부 래퍼에만 → 글씨 걸림 방지 */
.accordion .accordion_inner ul li .accordion_content .inner {
  padding: 24px;
  color: var(--GREY-900, #222);

  /* Body 1/Regular - 18 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  letter-spacing: 0.09px;
}

/*lifting 서브 비주얼==================================================================== */

.lifting_main_banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/880;
  overflow: hidden;
}

.lifting_main_banner::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/thermage01.png')bottom center/cover no-repeat;
  height: 100%;
}

.lifting_banner_inner {
  position: relative;
  width: min(1400px, 90%);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 1;
}

.lifting_main_banner .banner_text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.lifting_main_banner .banner_text h2 {
  color: var(--GREY-00, #4c4c4c);
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-4xl);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 1.12px;
}

.lifting_main_banner .banner_text p {
  color: var(--GREY-200, #4c4c4c);
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.24px;
}

@media (max-width:1024px) {

  .lifting_main_banner {
    aspect-ratio: 1920/1200;
  }

  .accordion .accordion_inner h2 {
    font-size: 34px;
  }

  .accordion .accordion_inner ul li .accordion_btn h3 {
    font-size: 18px;
  }

  .lifting_main_banner ::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scale(1.5);
  }

  .lifting_main_banner .banner_text {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .lifting_main_banner::before,
  .content_sub_banner {
    background-position-x: 99% !important;
  }

  .content_sub_banner::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background: rgba(0, 0, 0, 0.15);
    z-index: 0;
  }

  .accordion .accordion_inner {
    padding: 0;
  }

  .accordion {
    padding: 80px 0 100px 0;
  }


}


/*lifting 서브 비주얼==================================================================== */

.content_sub_banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/800;
  overflow: hidden;
}

.content_banner_inner {
  position: relative;
  width: min(1400px, 90%);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 1;
}

.content_sub_banner .banner_text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  gap: 13px;
}

.content_sub_banner .banner_text span {
  color: var(--GREY-200, #4c4c4c);

  /* Body 1/Regular - 18 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  letter-spacing: 0.09px;
}

.content_sub_banner .banner_text h2 {
  color: var(--GREY-00, #4c4c4c);
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-4xl);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 1.12px;
}

.content_sub_banner .banner_text p {
  /* color: var(--GREY-200, #C7C7C7); */
  color: #4c4c4c;
  font-family: var(--Family-KO, Pretendard);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.24px;
}

@media (max-width:1024px) {

  .content_sub_banner {
    aspect-ratio: 1920/1200;
  }

  .content_sub_banner ::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scale(1.5);
    background-color: rgba(0, 0, 0, 0.1);
    z-index: -1;
  }

  .content_sub_banner .banner_text {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }


}


/*시술 특징==================================================================== */
.treatment_feature_wrap {
  background: #F4F2F1;
  width: 100%;
  position: relative;
  height: 640px;
  overflow: hidden;
}

.treatment_feature_wrap .treatment_feature_box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 228px;
}

.treatment_feature_wrap .treatment_feature_box>div {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.treatment_feature_wrap .treatment_feature_box .img_box {
  width: 853px;
  height: 640px;
  position: absolute;
  right: -5%;

  align-items: center;
  justify-content: center;
  /* 장식용 이미지가 탭 메뉴 위를 덮어 마지막 탭 클릭이 막히던 문제 방지 */
  pointer-events: none;
}

.treatment_feature_wrap .treatment_feature_box .img_box img {
  object-fit: cover; scale: 0.65; margin-left:200px;
  /* width: 100%;
  aspect-ratio: 853/640; */

}

.treatment_feature_wrap .treatment_feature_box .txt_box {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.treatment_feature_wrap .treatment_feature_box .txt_box h2 {
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 40px */
  letter-spacing: -0.4px;
}

.treatment_feature_wrap .treatment_feature_box .txt_box ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* width: 50%; */
  width: 100%;
}

.treatment_feature_wrap .treatment_feature_box .txt_box ul li {
  display: flex;
  gap: 24px;
  align-items: center;
}

.treatment_feature_wrap .treatment_feature_box .txt_box ul li p {
  color: var(--GREY-600, #5B5B5B);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-align: left;
}

.treatment_feature_wrap .treatment_feature_box .txt_box ul li p span {
  color: var(--GREY-600, #5B5B5B);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 30px */
}

.treatment_feature_wrap .treatment_feature_box .txt_box ul li img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  align-self: flex-start;
}

/* ✅ 태블릿: 세로 정렬 + 이미지 아래로 */
@media (max-width: 1400px) {
  
  .treatment_feature_wrap {
    height: auto;
    padding: clamp(60px, 8vw, 100px) 0;
  }

  .treatment_feature_wrap .treatment_feature_box {
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
  }

  .treatment_feature_wrap .treatment_feature_box .img_box {
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: auto;
    max-width: 600px;
    margin-top: 20px;
  }

  .treatment_feature_wrap .treatment_feature_box .img_box img {
    width: 100%;
    height: auto;
  }

  .treatment_feature_wrap .treatment_feature_box .txt_box {
    align-items: center;
    text-align: center;
    z-index: 2;
    width: 600px;
  }

  /* .treatment_feature_wrap .treatment_feature_box .txt_box ul {
    width: 100%;
  } */
}

/* ✅ 모바일: 여백 조정 + 폰트 축소 */
@media (max-width: 768px) {
  .treatment_feature_wrap .treatment_feature_box .txt_box h2 {
    font-size: 24px;
  }

  .treatment_feature_wrap .treatment_feature_box .txt_box ul li {
    gap: 12px;
  }

  .treatment_feature_wrap .treatment_feature_box .txt_box ul li p {
    font-size: 16px;
    text-align: left;
  }

  .treatment_feature_wrap .treatment_feature_box .txt_box ul li p span {
    font-size: 18px;
  }

  /* .treatment_feature_wrap .treatment_feature_box .txt_box ul {
    width: 100%;
  } */

  .treatment_feature_wrap .treatment_feature_box .txt_box {
    width: 450px;
  }
  .treatment_feature_wrap .treatment_feature_box .img_box img {
    margin-left: 0;
  }
}

/* ✅ 모바일 : 시술 특징 이미지가 작게 나오던 문제
   PC 기준으로 잡힌 축소값(scale 0.65, 페이지별 인라인 scale 0.5~0.55)과
   좌측 여백 200px 이 모바일에도 그대로 적용돼 이미지가 작게 보였다.
   모바일에서는 원래 크기로 컨테이너를 꽉 채우게 한다. (인라인 style 을 이기려면 !important 필요) */
@media (max-width: 1024px) {
  .treatment_feature_wrap .treatment_feature_box .img_box img {
    scale: 1 !important;
    margin-left: 0 !important;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ✅ 모바일 : 시술 특징 영역 가운데 정렬
   .txt_box 에 고정 width(600px/450px)가 걸려 있어 좁은 화면에서 컨테이너가 화면을 넘치고,
   align-items:center 가 '넘친 폭' 기준으로 중앙을 잡아 이미지·본문이 왼쪽으로 치우쳐 보였다.
   고정 width 를 max-width 로 바꿔 화면 안에서 실제로 가운데 오도록 한다. */
@media (max-width: 1400px) {
  .treatment_feature_wrap .treatment_feature_box .txt_box {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 1024px) {
  .treatment_feature_wrap .treatment_feature_box .img_box {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
  }

  .treatment_feature_wrap .treatment_feature_box .img_box img {
    /* 인라인 width(238px/545px)가 화면을 넘지 않도록 가두고 가운데 정렬 */
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  .treatment_feature_wrap .treatment_feature_box .txt_box {
    width: 100%;
    max-width: 450px;
  }
}

/* ✅ 탭 전환 시 섹션 높이가 달라지던 문제
   탭 이미지 3장의 원본 비율이 제각각(327×570 / 1254×1254 / 1974×3952)이라
   인라인 width(238px/545px)로는 높이가 415 / 545 / 476px 로 벌어졌다.
   이미지 표시 높이를 고정하고 object-fit:contain 으로 맞춰
   세 탭 모두 같은 크기로 보이면서 섹션 높이도 일정해진다.
   (PC(>1400)는 .treatment_feature_wrap 이 height:640px 고정이라 해당 없음) */
@media (max-width: 1400px) {
  .treatment_feature_wrap .treatment_feature_box .img_box img {
    /* PC 장식용 값 해제 */
    scale: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* 인라인 style(width:238px/545px, height:auto)을 이겨야 하므로 !important.
       JS 가 탭 전환마다 인라인 width 를 다시 넣는 것도 이걸로 무력화된다. */
    width: auto !important;
    height: 380px !important;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }

  /* 이미지마다 캔버스 내 여백 비율이 달라(제품이 차지하는 세로 비율
     리쥬란 99.3% / 물광 76.6% / 쥬베룩 88.5%) 같은 높이를 주면 크기가 달라 보인다.
     '보이는 제품 높이'가 물광주사와 같아지도록 요소 높이를 개별 보정한다.
     목표 제품 높이 337px = 물광 440×0.766 기준 */
  .treatment_feature_wrap .img_box img[src*="rajuran01"] {
    height: 340px !important;
  }

  .treatment_feature_wrap .img_box img[src*="hyalrie01"] {
    height: 440px !important;
  }

  .treatment_feature_wrap .img_box img[src*="juvelook01"] {
    height: 380px !important;
  }

  /* 이미지 요소 높이가 탭마다 340/440/380 으로 달라 섹션 높이가 흔들리던 문제.
     이미지 칸 자체를 가장 큰 값(440px)으로 고정하고 그 안에서 세로 가운데 정렬한다. */
  .treatment_feature_wrap .treatment_feature_box .img_box {
    flex: none;
    height: 440px;
    justify-content: center;
    /* 본문과의 간격 축소 (기존 margin-top:20px).
       gap 을 0 으로 내린 뒤에도 남는 여백을 음수 마진으로 더 당긴다 */
    margin-top: -100px;
  }

  /* 본문 ↔ 이미지 사이 간격 축소 (기존 clamp(40px, 6vw, 80px)) */
  .treatment_feature_wrap .treatment_feature_box {
    gap: 0;
  }

  /* 본문 줄 수 차이로 생기는 높이 변화 흡수 (가장 긴 탭 기준) */
  .treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"].active {
    min-height: 360px;
  }
}

/* 좁은 화면에서는 물광(정사각 + 좌우 여백)이 화면 폭에 먼저 걸리므로
   그 한계에 맞춰 세 이미지를 함께 축소한다. 목표 제품 높이 250px */
@media (max-width: 768px) {
  .treatment_feature_wrap .treatment_feature_box .img_box img {
    height: 283px !important;
  }

  .treatment_feature_wrap .img_box img[src*="rajuran01"] {
    height: 252px !important;
  }

  .treatment_feature_wrap .img_box img[src*="hyalrie01"] {
    height: 326px !important;
  }

  .treatment_feature_wrap .img_box img[src*="juvelook01"] {
    height: 283px !important;
  }

  .treatment_feature_wrap .treatment_feature_box .img_box {
    height: 326px;
  }

  .treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"].active {
    min-height: 400px;
  }
}


.feature_teb_meun p {
  cursor: pointer;
  /* 탭 개수가 많아도(보톡스 6개) 라벨이 글자 단위로 쪼개지지 않게 하고,
     대신 메뉴 자체가 여러 줄로 넘어가게 한다 (.feature_teb_meun 의 flex-wrap) */
  white-space: nowrap;
  flex: none;
  /* 뱃지(pill) 형태 — 컨테이너 배경 대신 항목마다 테두리를 가진다 */
  padding: 9px 18px;
  border: 1px solid #DDD8D1;
  border-radius: 999px;
  background: #fff;
  transition: all 0.3s;
  color: var(--primary-700, #494034);
  font-family: var(--Family-KO, Pretendard);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 18px */
  letter-spacing: 0.09px;
}

.feature_teb_meun p:hover {
  border-color: #948878;
  color: #948878;
}

.feature_teb_meun p.active {
  background: #948878;
  border-color: #948878;
  color: #fff;
}

.treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"] {
  display: none;
}

.treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"].active {
  display: block;
  width: 53%;
}

.treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"].active h2 {
  padding-bottom: 40px;
}

.feature_teb_meun {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  /* 항목이 각각 뱃지가 되므로 감싸는 배경/여백은 제거 */
  padding: 0;
  border-radius: 0;
  background: none;
}


@media (max-width: 1400px) {
  .treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"].active h2 {
    width: 80%;
    text-align: left;
  }

  .treatment_feature_wrap .txt_box>div[class^="feature_teb_box_"].active {
    display: block;
    width: 100%;
  }
}



/* 20251107 추가 */

.flex {
  display: flex;
  flex-wrap: wrap;
}

.txt_box.flex {
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.h_40 {
  color: var(--GREY-900, #222);
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* letter-spacing: -0.4px; */
}

.p_24 {
  color: var(--GREY-800, #2E2E2E);
  font-size: 24px;
  font-style: normal;
  line-height: 130%;
  /* 31.2px */
  letter-spacing: 0.24px;
}

.w500 {
  font-weight: 500 !important;
}

.caution_num_box {
  width: 100%;
}

.caution_num_box ul {
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.caution_num_box ul li {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--GREY-, #E6E6E6);
  background: var(--GREY-gr-50, #FAFAFA);
  padding: 22px 20px;
  align-items: center;
  gap: 24px;
}

.caution_num {
  border-radius: 999px;
  background: var(--GREY-00, #FFF);
  color: var(--primary-600, #615545);
  text-align: center;

  /* Title 1/Bold - 32 */
  font-family: var(--Family-KO, Pretendard);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 32px */
  letter-spacing: -0.16px;
  aspect-ratio: 1 / 1;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt8 {
  margin-top: 8px;
}

.treatment_advantage_wrap .card_box.three .card {
  flex: 1 1 calc((100% / 3) - 8px);
}

.gold_p {
  color: #615545;
}

.c_5b5b {
  color: #5b5b5b;
}

.p_20 {
  color: var(--GREY-600, #5B5B5B);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 20px */
}

.h150 {
  line-height: 150% !important;
}

.p_24 {
  color: var(--primary-600, #615545);
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  line-height: 130%;
  /* 24px */
  letter-spacing: 0.48px;
}

.p_18 {
  color: var(--GREY-600, #5B5B5B);
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 18px */
}

.sisul_box {
  align-items: stretch;
  gap: 120px;
}

.sisul_box .left {
  width: 591px;
}

.sisul_box .right {
  width: calc(100% - 711px);
}

.sisul_list_box {
  flex-direction: column;
  width: 100%;
}

.sisul_con {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  border-top: 1px solid #E6E6E6;
  padding: 40px 0;
}

.sisul_con:last-child {
  border-bottom: 1px solid #E6E6E6;
}

.sisul_tit {
  margin-bottom: 12px;
}

.sisul_times {
  text-align: end;
}

.sisul_info {
  flex-direction: column;
  gap: 12px;
}

.sisul_box .left img {
  width: 100%;
}

.p_16 {
  color: #444;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.32px;
}

@media all and (max-width:1200px) {
  .sisul_box .right {
    width: 100%;
  }

  .sisul_box .left {
    margin: 0 auto;
  }
}

@media all and (max-width:1000px) {
  .caution_num_box ul li {
    flex-direction: column;
    border-radius: 20px;
    text-align: center;
  }

  .h_40 {
    font-size: 34px;
  }

  .treatment_advantage_wrap {
    padding: 60px 0;
  }
}

@media all and (max-width:768px) {
  .sisul_box .left {
    width: 100%;
  }

  .p_24 {
    font-size: 22px;
  }
}


/* 20251111 추가 */
.treatment_principle.no_bg_txt:before {
  display: none;
}

.gold_p {
  color: #948878;
}

.center {
  text-align: center !important;
}

.yuda_flex_box {
  align-items: stretch;
  gap: 40px;
}

.yuda_side {
  width: calc(50% - 20px);
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.white {
  color: #fff !important;
}

.yuda_tit_box {
  flex-direction: column !important;
  gap: 5px !important;
  border-radius: 8px;
  border: 1px solid var(--primary-100, #E4E1DD);
  padding: 24px 28px;
  background: #796A56;
  text-align: center;
  height: 177px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.yuda_con_box {
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.yuda_con {
  border-radius: 8px;
  border: 1px solid var(--primary-100, #E4E1DD);
  background: var(--GREY-00, #FFF);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}



@media all and (max-width:1200px) {
  .yuda_side {
    width: 100%;
  }

  .yuda_tit_box {
    height: auto;
  }


}

/* 유다V/R주사 설명은 문장 단위(<br>)로 끊어 읽히도록 모바일에서도 유지한다.
   (기존 @media (max-width:768px) { .yuda_tit_box br { display:none } } 제거) */


/* 20251126 추가 */
.gray_bar {
  background: linear-gradient(180deg, #D4D4D4 0%, #796A56 100%);
  width: 1px;
  height: 88px;
  margin: 0 auto;
}

.banner_p {
  color: rgba(255, 255, 255, 0.60);
  text-align: center;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 4px;
  text-transform: uppercase;
}

.h_64 {
  color: #222;
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 64px */
  letter-spacing: -0.5px;
}

.banner_txt_box p {
  color: rgba(255, 255, 255, 0.90);
  text-align: center;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 20px */
}

.column {
  flex-direction: column;
}

.list_flex_box.three ul {
  gap: 24px;
}

.list_flex_box.three ul li {
  width: calc(33.333% - 16px);
}

.list_flex_box.three ul.num_three_list li {
  gap: 24px;
  align-items: flex-start;
  border-radius: 12px;
  border: 0.667px solid #E4E1DD;
  background: #FDFDFD;
  padding: 40px 24px;
}

@media all and (max-width:1080px) {
  .list_flex_box.three ul li {
    width: calc(50% - 12px);
  }

  .h_64 {
    font-size: 48px;
  }
}

@media all and (max-width:768px) {
  /* 브랜드스토리 배너 문구는 문장 단위(<br>)로 끊어 읽히도록 유지한다.
     (기존 .banner_txt_box p br { display:none } 은 문장이 통째로 이어붙어
      단어가 어색하게 잘리므로 제거) */
  .list_flex_box.three ul li {
    width: 100%;
  }
}


/* 의료진 소개 */
/* PC 스타일 */
.doctor_section {
  position: relative;
  background: #D3CCC3;
  overflow: hidden;
  padding: 100px 0;
}

.doctor_section .doctor_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doctor_section .doctor_info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.doctor_section .doctor_title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doctor_section .name_wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.doctor_section .name_wrap .name {
  color: #9C6A38;
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
}

.doctor_section .name_wrap .position {
  color: #9C6A38;
  font-size: 40px;
  font-weight: 400;
  line-height: 60px;
}

.doctor_section .subtitle {
  color: #6E5F52;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: 0.24px;
}

.doctor_section .doctor_career {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doctor_section .career_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor_section .career_item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.doctor_section .career_item .bullet {
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  aspect-ratio: 1/1;
  border-radius: 1px;
  background: rgba(148, 136, 120, 0.50);
  backdrop-filter: blur(2px);
  flex-shrink: 0;
}

.doctor_section .career_item p {
  color: #2E2620;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.10px;
}

.doctor_section .doctor_image {
  width: 550px;
  height: 650px;
  position: relative;
  margin: 0 80px;
  /* overflow: hidden; */
}

.relative {
  position: relative;
}

.doctor_section .gradient_overlay {
  width: 605px;
  height: 742px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #494034 0%, rgba(73, 64, 52, 0) 100%);
  transform: rotate(180deg);
  pointer-events: none;
}

.doctor_section .doctor_image img {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  object-fit: cover;
  z-index: 9;
}

.doctor_section .bg_text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.05);
  font-size: 144px;
  font-weight: 700;
  line-height: 144px;
  white-space: nowrap;
  pointer-events: none;
}

.doc_inner {
  max-width: 1400px;
}

.career_bar {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.10);
}

.doctor_section.reverse .career_bar {
  background-color: rgba(34, 34, 34, 0.10);
}

.doctor_section.reverse .doctor_content {
  flex-direction: row-reverse;
}

.doctor_section.reverse .name_wrap .name,
.doctor_section.reverse .name_wrap .position {
  color: #222;
}

.doctor_section.reverse .subtitle {
  color: #948878;
}

.doctor_section.reverse .career_item p {
  color: rgba(34, 34, 34, 0.90);
}

.doctor_section.reverse .bg_text {
  color: rgba(73, 64, 52, 0.10);
}

@media (max-width: 1200px) {
  .doc_inner {
    width: 93.75%;
  }
}

/* 태블릿 */
@media (max-width: 1024px) {
  .doctor_section {
    padding: 60px 0;
  }

  .doctor_section .doctor_content {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .doctor_section .doctor_info {
    gap: 30px;
  }

  .doctor_section .name_wrap .name,
  .doctor_section .name_wrap .position {
    font-size: 32px;
    line-height: 48px;
  }

  .doctor_section .subtitle {
    font-size: 20px;
    line-height: 30px;
  }

  .doctor_section .career_item p {
    font-size: 18px;
    line-height: 28px;
  }

  .doctor_section .doctor_image {
    width: 500px;
    height: 620px;
  }

  .doctor_section .doctor_image img {
    width: 480px;
    height: 640px;
  }

  .doctor_section .bg_text {
    font-size: 100px;
    line-height: 100px;
  }

  .doctor_section.reverse .doctor_content {
    flex-direction: column-reverse;
  }

  .doctor_section .doctor_image.realtive .bg_text {
    font-size: 100px;
    line-height: 100px;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  .doctor_section {
    padding: 40px 0;
  }

  .doctor_section .doctor_info {
    gap: 24px;
    width: 100%;
  }

  .doctor_section .doctor_title {
    gap: 8px;
  }

  .doctor_section .name_wrap {
    flex-direction: column;
    gap: 0;
  }

  .doctor_section .name_wrap .name,
  .doctor_section .name_wrap .position {
    font-size: 28px;
    line-height: 40px;
  }

  .doctor_section .subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .doctor_section .doctor_career {
    gap: 12px;
  }

  .doctor_section .career_group {
    gap: 6px;
  }

  .doctor_section .career_item {
    gap: 12px;
  }

  .doctor_section .career_item .bullet {
    width: 8px;
    height: 8px;
  }

  .doctor_section .career_item p {
    font-size: 16px;
    line-height: 22px;
  }

  .doctor_section .doctor_image {
    width: 100%;
    height: 450px;
  }

  .doctor_section .gradient_overlay {
    width: 100%;
    height: 450px;
  }

  .doctor_section .doctor_image img {
    width: 100%;
    height: 100%;
    left: 0;
    object-fit: contain;
  }

  .doctor_section .bg_text {
    font-size: 40px;
    line-height: 40px;
  }

  .doctor_section .career_bar {
    margin: 6px 0;
  }

  .doctor_section .doctor_image.realtive .bg_text {
    font-size: 40px;
    line-height: 40px;
  }
}


/* Sub Hero Section */
.sub_hero_section {
  width: 100%;
  height: 800px;
  position: relative;
  overflow: hidden;
}

/* Background Image */
.sub_hero_bg_image {
  width: 100%;
  height: 800px;
  padding: 150px 260px;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(360deg, #BB9E7C 0%, #C0A586 100%);
  background-blend-mode: screen, normal, normal;
  object-fit: cover;
}

.sub_hero_section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #8B877B 0%, #8B877B 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Content */
.sub_hero_content {
  position: absolute;
  left: 260px;
  top: 322px;
  z-index: 2;
}

.sub_hero_text_wrap {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 526px;
}

/* Category */
.sub_hero_category {
  color: #5B5B5B;
  font-size: 18px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.09px;
  margin: 0;
}

/* Title */
.sub_hero_title {
  color: #181511;
  font-size: 56px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 73px;
  letter-spacing: 1.12px;
  margin: 0;
}

/* Description */
.sub_hero_description {
  color: #5B5B5B;
  font-size: 24px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  line-height: 31px;
  letter-spacing: 0.24px;
  margin: 0;
}

/* Responsive */
@media (max-width: 1600px) {
  .sub_hero_section {
    height: 700px;
  }

  .sub_hero_bg_image {
    height: 700px;
    padding: 120px 200px;
  }

  .sub_hero_content {
    left: 200px;
    top: 280px;
  }

  .sub_hero_title {
    font-size: 50px;
    line-height: 65px;
  }

  .sub_hero_description {
    font-size: 22px;
    line-height: 29px;
  }
}

@media (max-width: 1200px) {
  .sub_hero_section {
    height: 600px;
  }

  .sub_hero_bg_image {
    height: 600px;
    padding: 100px 120px;
  }

  .sub_hero_content {
    left: 120px;
    top: 220px;
  }

  .sub_hero_text_wrap {
    max-width: 450px;
  }

  .sub_hero_category {
    font-size: 16px;
    line-height: 24px;
  }

  .sub_hero_title {
    font-size: 44px;
    line-height: 57px;
  }

  .sub_hero_description {
    font-size: 20px;
    line-height: 26px;
  }
}

@media (max-width: 968px) {
  .sub_hero_section {
    height: 500px;
  }

  .sub_hero_bg_image {
    height: 500px;
    padding: 80px 80px;
  }

  .sub_hero_content {
    left: 80px;
    top: 180px;
  }

  .sub_hero_text_wrap {
    max-width: 400px;
    gap: 10px;
  }

  .sub_hero_category {
    font-size: 16px;
    line-height: 23px;
  }

  .sub_hero_title {
    font-size: 38px;
    line-height: 49px;
  }

  .sub_hero_description {
    font-size: 18px;
    line-height: 23px;
  }
}

@media (max-width: 768px) {
  .sub_hero_section {
    height: 450px;
  }

  .sub_hero_bg_image {
    height: 450px;
    padding: 60px 40px;
  }

  .sub_hero_content {
    left: 40px;
    top: 150px;
  }

  .sub_hero_text_wrap {
    max-width: calc(100% - 80px);
  }

  .sub_hero_category {
    font-size: 14px;
    line-height: 21px;
  }

  .sub_hero_title {
    font-size: 34px;
    line-height: 44px;
  }

  .sub_hero_description {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 480px) {
  .sub_hero_section {
    height: 400px;
  }

  .sub_hero_bg_image {
    height: 400px;
    padding: 40px 20px;
  }

  .sub_hero_content {
    left: 20px;
    top: 120px;
  }

  .sub_hero_text_wrap {
    max-width: calc(100% - 40px);
    gap: 8px;
  }

  .sub_hero_category {
    font-size: 14px;
    line-height: 20px;
  }

  .sub_hero_title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.8px;
  }

  .sub_hero_description {
    font-size: 16px;
    line-height: 130%;
    text-wrap: balance;
  }
}





/* 탭메뉴 */

.commu_tab_menu {
  margin: 90px 0 70px 0;
}



.commu_tab_menu_wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.commu_tab_menu_wrapper ul li {
  width: 136px;
  min-width: 136px;
  border: 1px solid #666;
  border-radius: 99px;
  padding: 13px 0;
  cursor: pointer;
}

.commu_tab_menu_wrapper ul li.active {
  background: #684C4E;
}

.commu_tab_menu_wrapper ul li.active p {
  color: #fff;
}

.event_tab_custom ul li {
  width: unset;
  padding: 13px 40px;
}



.commu_tab_menu_wrapper ul li:hover {
  background: #684C4E;
}

.commu_tab_menu_wrapper ul li:hover .commu_tab p {
  color: #FFF;

}

.commu_tab p {
  color: #666;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.programCon {
  max-width: 1400px;
}

@media all and (max-width:1210px) {
  .commu_tab_menu_wrapper ul {
    justify-content: unset;
  }

  .commu_tab_menu_wrapper ul li {
    padding: 10px 0;
  }

  .commu_tab p {
    font-size: 16px;
  }


  .event_tab_custom ul {
    justify-content: center;
  }
}

.program_search a {
  color: #fff;
}

.programCon {
  margin: 160px auto;
}

/* 간편 로그인 */
.simple_login_box {
  margin-top: 20px;
}

.simple_login_box p {
  font-family: 'Pretendard';
  font-size: 16px;
  color: #454545;
  font-weight: bold;
  margin: 15px 0 25px;
  line-height: 1.3;
}

.simple_login_icon_box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


/* Umeib Principles Section */
.umeib_principles_section {
  padding: 0;
  background: #F5F5F5;
}

.umeib_principles_inner {
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Main Title */
.umeib_principles_main_title {
  text-align: center;
  color: #222222;
  font-size: 36px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  line-height: 46.80px;
  margin: 0;
}

/* Description */
.umeib_principles_description {
  text-align: center;
  color: #5B5B5B;
  font-size: 18px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 28.80px;
  letter-spacing: 0.10px;
  margin: 0;
}

/* 설명 문단 그룹 — 의미 단위로 끊어 문단 사이 여백을 준다 */
.umeib_principles_description p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

.umeib_principles_description p + p {
  margin-top: 26px;
}

/* Divider */
.umeib_principles_divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, #D4D4D4 0%, #796A56 100%);
}

/* Section Title */
.umeib_principles_section_title {
  text-align: center;
  color: #615545;
  font-size: 36px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  line-height: 46.80px;
  margin: 0;
}

/* List */
.umeib_principles_list {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Item */
.umeib_principles_item {
  height: 120px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 22px;
  padding-bottom: 22px;
  background: #FAFAFA;
  overflow: hidden;
  border-radius: 999px;
  outline: 1px #E6E6E6 solid;
  outline-offset: -1px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Label */
.umeib_principles_label {
  width: 360px;
  height: 80px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #F4F2F1;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.umeib_principles_label_text {
  text-align: center;
  color: #615545;
  font-size: 28px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.07px;
  margin: 0;
}

/* Content */
.umeib_principles_content {
  flex: 1;
  color: #5B5B5B;
  font-size: 20px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.20px;
  margin: 0;
}

/* Responsive */
@media (max-width: 1400px) {

  .bs_main_banner_tit p {
  font-size: 32px !important; line-height: 1.5;
}

  .umeib_principles_inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media (max-width: 1200px) {
  main.content {
    margin-top: 54px;
  }

  .umeib_principles_inner {
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 28px;
  }

  .umeib_principles_main_title {
    font-size: 32px;
    line-height: 42px;
  }

  .umeib_principles_description {
    font-size: 16px;
    line-height: 27px;
  }

  .umeib_principles_section_title {
    font-size: 32px;
    line-height: 42px;
  }

  .umeib_principles_label {
    width: 320px;
  }

  .umeib_principles_label_text {
    font-size: 24px;
    line-height: 24px;
  }

  .umeib_principles_content {
    font-size: 18px;
    line-height: 24px;
  }
}

@media (max-width: 968px) {
  .umeib_principles_inner {
    padding-top: 60px;
    padding-bottom: 60px;
    gap: 24px;
  }

  .umeib_principles_main_title {
    font-size: 28px;
    line-height: 36px;
  }

  .umeib_principles_description {
    font-size: 16px;
    line-height: 26px;
  }

  .umeib_principles_divider {
    height: 60px;
  }

  .umeib_principles_section_title {
    font-size: 28px;
    line-height: 36px;
  }

  .umeib_principles_list {
    gap: 12px;
  }

  .umeib_principles_item {
    height: auto;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    border-radius: 16px;
  }

  .umeib_principles_label {
    width: 100%;
    height: auto;
    padding: 12px;
  }

  .umeib_principles_label_text {
    font-size: 22px;
    line-height: 22px;
  }

  .umeib_principles_content {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 768px) {
  .umeib_principles_inner {
    padding-top: 50px;
    padding-bottom: 50px;
    gap: 20px;
  }

  .umeib_principles_main_title {
    font-size: 24px;
    line-height: 31px;
  }

  .umeib_principles_description {
    font-size: 14px;
    line-height: 24px;
  }

  .umeib_principles_divider {
    height: 50px;
  }

  .umeib_principles_section_title {
    font-size: 24px;
    line-height: 31px;
  }

  .umeib_principles_item {
    padding: 16px;
  }

  .umeib_principles_label_text {
    font-size: 20px;
    line-height: 20px;
  }

  .umeib_principles_content {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 480px) {
  .umeib_principles_inner {
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 16px;
  }

  .umeib_principles_main_title {
    font-size: 20px;
    line-height: 26px;
  }

  .umeib_principles_description {
    font-size: 14px;
    line-height: 22px;
  }

  .umeib_principles_divider {
    height: 40px;
  }

  .umeib_principles_section_title {
    font-size: 20px;
    line-height: 26px;
  }

  .umeib_principles_list {
    gap: 10px;
  }

  .umeib_principles_item {
    padding: 14px;
    gap: 12px;
  }

  .umeib_principles_label {
    padding: 10px;
  }

  .umeib_principles_label_text {
    font-size: 18px;
    line-height: 18px;
  }

  .umeib_principles_content {
    font-size: 14px;
    line-height: 19px;
  }
}

.gap20 {
  gap: 20px;
}

.p_18 {
  color: #222;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28.8px;
  /* 160% */
  letter-spacing: 0.1px;
}

.c5b5b {
  color: #5b5b5b !important;
}

.map_line_color_box {
  width: 50px;
  height: 20px;
}

.map_line_info_box li {
  align-items: center;
}

.map_line_info_box li:nth-child(1) .map_line_color_box {
  background: #1874FF;
}

.map_line_info_box li:nth-child(2) .map_line_color_box {
  background: #ED2F2A;
}

.map_line_info_box li:nth-child(3) .map_line_color_box {
  background: #FFB54D;
}


/* 20260102 추가 */
.map_info_txt.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
}

.map_info_txt.flex div {
  flex: 0 0 calc(50% - 30px);
}


@media (max-width: 1000px) {
  .map_info_txt.flex div {
    flex: 0 0 100%;
  }
}


/* 시술 특징 카드 섹션 */
.procedure_feature_wrap {
  position: relative;
  background: #F4F2F1;
  padding: 80px 0;
  overflow: hidden;
}

.procedure_feature_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.procedure_feature_title {
  font-size: 40px;
  font-weight: 700;
  color: #222;
  text-align: center;
  line-height: 40px;
}

.procedure_feature_desc {
  font-size: 24px;
  font-weight: 500;
  color: #8E8E8E;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.24px;
}

.procedure_feature_cards {
  display: flex;
  align-items: stretch;
  gap: 40px;
  width: 100%;
}

.procedure_feature_card {
  flex: 1 1 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E4E1DD;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.procedure_feature_card .card_content {
  display: flex;
  flex-direction: column;
  /* space-between 은 카드마다 남는 공간을 나눠 배분해서
     제목 줄 수가 다르면 숫자↔제목 간격이 카드별로 달라진다 → 고정 gap 으로 통일 */
  justify-content: flex-start;
  gap: 32px;
  align-items: center;
  min-height: 260px;
}

.procedure_feature_card .card_number {
  font-size: 24px;
  font-weight: 500;
  color: #948878;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.24px;
  width: 100%;
}

.procedure_feature_card .card_title {
  font-size: 24px;
  font-weight: 700;
  color: #5B5B5B;
  text-align: center;
  line-height: 130%;
  letter-spacing: 0.12px;
  /* 2줄 제목(카드 02) 기준으로 높이를 확보해 본문 시작 위치도 카드마다 동일하게 맞춘다
     24px × 130% × 2줄 = 62.4px */
  min-height: 62.4px;
  margin: 0;
}

.procedure_feature_card .card_desc {
  font-size: 16px;
  font-weight: 400;
  color: #5B5B5B;
  line-height: 24px;
  letter-spacing: 0.08px;
  min-height: 120px;
  /* height 고정 시 줄 수가 늘면 아래 태그 영역과 겹침 → min-height 로 변경 */
}

/* 카드 하단 블록(태그 / 체크리스트) — 본문 길이가 달라도 시작선을 카드마다 통일.
   margin-top:auto 로 카드 하단에 붙이고, 두 블록의 높이를 체크리스트(3줄=95px) 기준으로
   맞춰 하단 정렬과 상단 시작선이 동시에 일치하게 한다. */
.procedure_feature_card .card_tags,
.procedure_feature_card .card_checks {
  margin-top: auto;
  min-height: 95px;
}

/* 카드 하단 태그 - 사각형 */
.procedure_feature_card .card_tags .tag_row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center;
}

.procedure_feature_card .card_tags .tag_row:last-child {
  margin-bottom: 0;
}

.procedure_feature_card .card_tags .tag {
  width: 146px;
  padding: 4px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #5B5B5B;
  line-height: 21px;
  letter-spacing: 0.07px;
}

.procedure_feature_card .card_tags.square .tag {
  background: #F9F7F5;
  border-radius: 4px;
}

.procedure_feature_card .card_tags.round .tag {
  background: #fff;
  border: 1px solid #E4E1DD;
  border-radius: 20px;
}

/* 카드 하단 체크리스트 */
.procedure_feature_card .card_checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 본문·태그가 가운데 정렬이라 체크리스트도 블록째 가운데로 놓는다.
     항목마다 가운데를 잡으면 체크 아이콘이 들쭉날쭉해지므로 좌측선은 유지 */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.procedure_feature_card .card_checks .check_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.procedure_feature_card .card_checks .check_item img {
  width: 18px;
  height: 18px;
}

.procedure_feature_card .card_checks .check_item span {
  font-size: 14px;
  font-weight: 400;
  color: #5B5B5B;
  line-height: 21px;
  letter-spacing: 0.07px;
}

/* 카드 구분점 */
.card_divider {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card_divider .dot.small {
  width: 6px;
  height: 6px;
  background: #E4E1DD;
  border-radius: 999px;
}

.card_divider .dot.large {
  width: 10px;
  height: 10px;
  background: #C9C3BB;
  border-radius: 999px;
}

/* 배경 텍스트 */
.procedure_feature_bg {
  position: absolute;
  right: 0;
  top: 20px;
  opacity: 0.03;
  text-align: right;
  color: #222;
  font-size: 80px;
  font-weight: 700;
  pointer-events: none;

  display: none;
}

/* 유다주사 시술 과정 카드 섹션 */
.judas_process_wrap {
  position: relative;
  background: #FAFAFA;
  padding: 80px 0;
  overflow: hidden;
}

.judas_process_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.judas_process_title {
  width: 100%;
  text-align: center;
  color: #222;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
}

.judas_process_cards {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.judas_process_card {
  flex: 1 1 0;
  height: 360px;
  padding: 24px 28px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E4E1DD;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}

.judas_card_top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.judas_card_num {
  width: 100%;
  text-align: center;
  color: #948878;
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
  letter-spacing: 0.24px;
}

.judas_card_title {
  width: 100%;
  text-align: center;
  color: #5B5B5B;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.12px;
}

.judas_card_desc {
  width: 100%;
  height: 120px;
  color: #5B5B5B;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.08px;
}

/* 유다주사 태그 */
.judas_card_tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.judas_tag_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.judas_tag {
  width: 179px;
  padding: 4px 0;
  text-align: center;
  color: #5B5B5B;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.07px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.judas_tag.square {
  background: #F9F7F5;
  border-radius: 4px;
}

.judas_tag.round {
  background: #fff;
  border: 1px solid #E4E1DD;
  border-radius: 20px;
}

/* 유다주사 화살표 */
.judas_card_arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.judas_card_arrow img {
  width: 24px;
  height: 24px;
}

/* 유다주사 체크리스트 */
.judas_card_checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.judas_check_group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.judas_check_item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.judas_check_item img {
  width: 18px;
  height: 18px;
}

.judas_check_item span {
  text-align: center;
  color: #5B5B5B;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.07px;
}

.judas_check_sub {
  padding: 4px 20px;
  width: 368px;
  color: #5B5B5B;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.07px;
}

/* 유다주사 배경 텍스트 */
.judas_process_bg {
  position: absolute;
  right: 0;
  top: 20px;
  opacity: 0.03;
  text-align: right;
  color: #222;
  font-size: 80px;
  font-weight: 700;
  pointer-events: none;
}

/* 유다주사 시술 과정 반응형 */
@media (max-width: 1400px) {
  .judas_process_cards {
    gap: 14px;
  }

  .judas_tag {
    width: calc(50% - 5px);
  }

  .judas_check_sub {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .judas_process_wrap {
    padding: 80px 0;
  }

  .judas_process_title {
    font-size: 32px;
    line-height: 32px;
  }

  .judas_process_cards {
    flex-direction: column;
    gap: 20px;
  }

  .judas_card_arrow {
    transform: rotate(90deg);
  }

  .judas_process_card {
    width: 100%;
    height: auto;
  }

  .judas_card_desc {
    height: auto;
  }

  .judas_card_num {
    font-size: 20px;
  }

  .judas_card_title {
    font-size: 20px;
  }

  .judas_tag {
    width: calc(50% - 5px);
  }

  .judas_process_bg {
    display: none;
  }
}

@media (max-width: 768px) {
  .judas_process_wrap {
    padding: 60px 0;
  }

  .judas_process_box {
    gap: 30px;
  }

  .judas_process_title {
    font-size: 24px;
    line-height: 24px;
  }

  .judas_process_card {
    padding: 20px;
  }

  .judas_card_num {
    font-size: 18px;
    line-height: 24px;
  }

  .judas_card_title {
    font-size: 18px;
    line-height: 22px;
  }

  .judas_card_desc {
    font-size: 14px;
    line-height: 21px;
  }

  .judas_tag_row {
    flex-direction: column;
    gap: 8px;
  }

  .judas_tag {
    width: 100%;
  }

  .judas_check_item span {
    font-size: 14px;
  }

  .judas_check_sub {
    font-size: 14px;
    padding: 4px 28px;
  }
}

/* 브랜드스토리 여정 섹션 */
.bs_journey_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F4F2F1;
  padding-right: calc((100% - 1400px) / 2);
  min-height: 640px;
}

.bs_journey_img {
  width: 835px;
  height: 640px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.bs_journey_content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 660px;
  padding: 0 20px;
}

.bs_journey_text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bs_journey_sub {
  color: #948878;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 26px;
  letter-spacing: 0.2px;
}

.bs_journey_title {
  color: #222;
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
}

.bs_journey_title span {
  color: #796A56;
}

.bs_journey_desc {
  color: #5B5B5B;
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: 0.1px;
}

.bs_journey_stats {
  display: flex;
  gap: 60px;
}

.bs_journey_stat {
  width: 126px;
  padding-bottom: 20px;
  border-bottom: 2px solid #C9C3BB;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bs_stat_num {
  color: #AFA69A;
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
}

.bs_stat_label {
  color: #5B5B5B;
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: 0.1px;
}

@media (max-width: 1400px) {
  .bs_journey_wrap {
    padding: 0 60px 0 0;
  }

  .bs_journey_img {
    width: 45%;
    height: 500px;
  }

  .bs_journey_content {
    max-width: 50%;
  }
}

@media (max-width: 1024px) {
  .bs_journey_wrap {
    flex-direction: column;
    padding: 0;
    min-height: auto;
  }

  .bs_journey_img {
    width: 100%;
    height: 400px;
  }

  .bs_journey_content {
    max-width: 100%;
    padding: 60px 40px;
    gap: 30px;
  }

  .bs_journey_title {
    font-size: 32px;
    line-height: 42px;
  }

  .bs_journey_desc {
    font-size: 16px;
    line-height: 26px;
  }

  .bs_stat_num {
    font-size: 32px;
    line-height: 42px;
  }
}

@media (max-width: 768px) {
  .bs_journey_img {
    height: 300px;
  }

  .bs_journey_content {
    padding: 40px 20px;
  }

  .bs_journey_sub {
    font-size: 16px;
  }

  .bs_journey_title {
    font-size: 24px;
    line-height: 34px;
  }

  .bs_journey_desc {
    font-size: 14px;
    line-height: 24px;
  }

  .bs_journey_desc br {
    display: none;
  }

  .bs_journey_stats {
    gap: 30px;
  }

  .bs_stat_num {
    font-size: 28px;
    line-height: 36px;
  }

  .bs_stat_label {
    font-size: 14px;
  }
}

/* 써마지 FLX 섹션 */
.thermage_flx_wrap {
  background: #fff;
  padding: 100px 0 120px;
}

.thermage_flx_title {
  text-align: center;
  color: #1A1A1A;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
}

.thermage_flx_cards {
  display: flex;
  gap: 15px;
  margin-top: 60px;
}

.thermage_flx_card {
  flex: 1 1 0;
  min-width: 0;
  background: #F6F5F4;
  border-radius: 24px;
  border: 1px solid #F3F4F6;
  padding: 40px 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.thermage_flx_card_title {
  color: #5A4B3C;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.12px;
}

.thermage_flx_card_desc {
  color: #4A5565;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.07px;
}

.thermage_flx_card_sub {
  color: #5B5B5B;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.06px;
}

/* 카드 하단 블록(태그 / 체크리스트) — 본문 길이가 달라도 시작선을 카드마다 통일.
   margin-top:auto 로 카드 하단에 붙이고, 두 블록 높이를 체크리스트(3줄=112px) 기준으로
   맞춰 하단 정렬과 상단 시작선이 동시에 일치하게 한다. */
.thermage_flx_card .thermage_flx_tags,
.thermage_flx_card .thermage_flx_checklist {
  margin-top: auto;
  min-height: 112px;
}

/* 써마지 태그 */
.thermage_flx_tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thermage_flx_tag_row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.thermage_flx_tag {
  flex: 1 1 0;
  padding: 4px 0;
  background: #fff;
  border-radius: 100px;
  text-align: center;
  color: #5B5B5B;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.07px;
}

/* 써마지 체크리스트 */
.thermage_flx_checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thermage_flx_check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.thermage_flx_check img {
  width: 24px;
  height: 24px;
}

.thermage_flx_check span {
  color: #948878;
  font-size: 16px;
  font-weight: 700;
  line-height: 20.8px;
}

@media (max-width: 1024px) {
  .thermage_flx_wrap {
    padding: 60px 0 80px;
  }

  .thermage_flx_title {
    font-size: 28px;
  }

  .thermage_flx_cards {
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
  }

  .thermage_flx_card {
    padding: 30px;
  }

  .thermage_flx_card .thermage_flx_tags,
  .thermage_flx_card .thermage_flx_checklist {
    /* 세로 배치라 카드 간 위치를 맞출 필요가 없음 */
    margin-top: 0;
    min-height: auto;
  }

  .thermage_flx_card_title {
    font-size: 20px;
  }

  .thermage_flx_tag_row {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .thermage_flx_wrap {
    padding: 50px 0 60px;
  }

  .thermage_flx_title {
    font-size: 24px;
    line-height: 28px;
  }

  .thermage_flx_card {
    padding: 24px;
    border-radius: 16px;
    gap: 16px;
  }

  .thermage_flx_card_title {
    font-size: 18px;
    line-height: 22px;
  }

  .thermage_flx_card_desc {
    font-size: 14px;
    line-height: 20px;
  }

  .thermage_flx_tag_row {
    flex-direction: column;
    gap: 8px;
  }

  .thermage_flx_check span {
    font-size: 14px;
  }
}

/* 울쎄라피 프라임 섹션 */
.ulthera_prime_wrap {
  background: #fff;
  padding: 114px 0 120px;
}

.ulthera_prime_title {
  text-align: center;
  color: #1A1A1A;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
}

.ulthera_prime_cards {
  display: flex;
  gap: 15px;
  margin-top: 80px;
}

.ulthera_prime_card {
  flex: 1 1 0;
  background: #F6F5F4;
  border-radius: 24px;
  border: 1px solid #F3F4F6;
  padding: 41px 41px;
  min-height: 190px;
}

.ulthera_prime_card_title {
  color: #5A4B3C;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.ulthera_prime_card_desc {
  color: #4A5565;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.75px;
  margin-top: 18px;
}

@media (max-width: 1024px) {
  .ulthera_prime_wrap {
    padding: 60px 0 80px;
  }

  .ulthera_prime_title {
    font-size: 28px;
  }

  .ulthera_prime_cards {
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
  }

  .ulthera_prime_card {
    min-height: auto;
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .ulthera_prime_wrap {
    padding: 50px 0 60px;
  }

  .ulthera_prime_title {
    font-size: 24px;
    line-height: 28px;
  }

  .ulthera_prime_card {
    padding: 24px;
    border-radius: 16px;
  }

  .ulthera_prime_card_title {
    font-size: 20px;
    line-height: 24px;
  }

  .ulthera_prime_card_desc {
    font-size: 14px;
    line-height: 20px;
    margin-top: 12px;
  }
}

/* 방민철 원장의 유메이비 스컬트라 섹션 */
.sculptra_program_wrap {
  background: #fff;
  padding: 100px 0 120px;
}

.sculptra_program_title {
  text-align: center;
  color: #1A1A1A;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
}

/* 프로그램 카드 상단 */
.sculptra_program_top {
  display: flex;
  gap: 13px;
  margin-top: 80px;
}

.sculptra_program_card {
  flex: 1 1 0;
  border-radius: 24px;
  padding: 41px 40px;
  text-align: center;
}

.sculptra_program_card.basic {
  background: #F9F7F5;
  border: 1px solid #F3F4F6;
}

.sculptra_program_card.maintain {
  background: #5A4B3C;
}

.sculptra_program_label {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.sculptra_program_card.basic .sculptra_program_label {
  color: #1A1A1A;
}

.sculptra_program_card.maintain .sculptra_program_label {
  color: #fff;
}

.sculptra_program_name {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin-top: 17px;
}

.sculptra_program_card.basic .sculptra_program_name {
  color: #5A4B3C;
}

.sculptra_program_card.maintain .sculptra_program_name {
  color: #fff;
}

.sculptra_program_desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-top: 8px;
}

.sculptra_program_card.basic .sculptra_program_desc {
  color: #6A7282;
}

.sculptra_program_card.maintain .sculptra_program_desc {
  color: rgba(255, 255, 255, 0.7);
}

/* 하단 스텝 카드 */
.sculptra_program_bottom {
  display: flex;
  gap: 37px;
  margin-top: 47px;
}

.sculptra_step_card {
  flex: 1 1 0;
  padding: 44px 47px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid #F3F4F6;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sculptra_step_num {
  color: #5A4B3C;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  opacity: 0.2;
}

.sculptra_step_title {
  color: #1A1A1A;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.sculptra_step_desc {
  color: #6A7282;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

@media (max-width: 1024px) {
  .sculptra_program_wrap {
    padding: 60px 0 80px;
  }

  .sculptra_program_title {
    font-size: 28px;
  }

  .sculptra_program_top {
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
  }

  .sculptra_program_bottom {
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
  }

  .sculptra_step_card {
    padding: 30px;
  }

  .sculptra_step_title {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .sculptra_program_wrap {
    padding: 50px 0 60px;
  }

  .sculptra_program_title {
    font-size: 24px;
    line-height: 28px;
  }

  .sculptra_program_card {
    padding: 28px 20px;
  }

  .sculptra_program_label {
    font-size: 16px;
  }

  .sculptra_program_name {
    font-size: 20px;
    line-height: 28px;
  }

  .sculptra_step_card {
    padding: 24px;
    gap: 16px;
    border-radius: 18px;
  }

  .sculptra_step_num {
    font-size: 28px;
  }

  .sculptra_step_title {
    font-size: 18px;
    line-height: 24px;
  }

  .sculptra_step_desc {
    font-size: 14px;
    line-height: 21px;
  }
}

/* 스컬트라 특징 섹션 */
.sculptra_feature_wrap {
  background: #F4F2F1;
  padding: 125px 0 120px;
}

.sculptra_feature_title {
  text-align: center;
  color: #1A1A1A;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
}

.sculptra_feature_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 59px;
}

.sculptra_feature_card {
  background: #fff;
  border-radius: 27px;
  border: 1px solid #E4E1DD;
  padding: 46px;
}

.sculptra_card_title {
  color: #5A4B3C;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.12px;
}

.sculptra_card_desc {
  color: #6A7282;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.09px;
  margin-top: 22px;
}

@media (max-width: 1024px) {
  .sculptra_feature_wrap {
    padding: 80px 0;
  }

  .sculptra_feature_title {
    font-size: 28px;
  }

  .sculptra_feature_cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
  }

  .sculptra_feature_card {
    padding: 30px;
  }

  .sculptra_card_title {
    font-size: 20px;
  }

  .sculptra_card_desc {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 768px) {
  .sculptra_feature_wrap {
    padding: 60px 0;
  }

  .sculptra_feature_title {
    font-size: 24px;
    line-height: 24px;
  }

  .sculptra_feature_card {
    padding: 24px;
    border-radius: 18px;
  }

  .sculptra_card_title {
    font-size: 18px;
  }

  .sculptra_card_desc {
    font-size: 14px;
    line-height: 21px;
    margin-top: 14px;
  }

  .sculptra_card_desc br {
    display: none;
  }
}

/* 유다약 병행요법 섹션 */
.yuda_combo_wrap {
  background: #fff;
  padding: 96px 0 120px;
}

.yuda_combo_title {
  text-align: center;
  color: #222;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
}

.yuda_combo_subtitle {
  text-align: center;
  color: #615545;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  margin-top: 13px;
}

/* 상단 시술 카드 3개 */
.yuda_combo_top {
  display: flex;
  gap: 16px;
  margin-top: 56px;
}

.yuda_combo_treatment {
  flex: 1 1 0;
  background: #F9F7F5;
  border-radius: 27px;
  border: 1px solid #F3F4F6;
  padding: 46px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.yuda_combo_treatment_title {
  text-align: center;
  color: #494034;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.07px;
}

.yuda_combo_tags {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
}

.yuda_combo_tag {
  padding: 6px 15px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #E4D5C7;
  text-align: center;
  color: #5A4B3C;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.07px;
}

.yuda_combo_treatment_desc {
  text-align: center;
  color: #6A7282;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.08px;
}

/* 하단 설명 카드 4개 */
.yuda_combo_bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 38px;
}

.yuda_combo_card {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 44px;
  background: #fff;
  border-radius: 26px;
  border: 1px solid #E4E1DD;
}

.yuda_combo_icon {
  width: 69px;
  height: 69px;
  min-width: 69px;
  background: #F9F7F5;
  border-radius: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.yuda_combo_icon svg {
  width: 26px;
  height: 26px;
}

.yuda_combo_card_text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yuda_combo_card_title {
  color: #1A1A1A;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.22px;
}

.yuda_combo_card_desc {
  color: #6A7282;
  font-size: 18px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0.1px;
}

@media (max-width: 1024px) {
  .yuda_combo_wrap {
    padding: 60px 0 80px;
  }

  .yuda_combo_title {
    font-size: 32px;
  }

  .yuda_combo_subtitle {
    font-size: 18px;
  }

  .yuda_combo_top {
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
  }

  .yuda_combo_treatment {
    padding: 30px;
  }

  .yuda_combo_treatment_title {
    font-size: 22px;
  }

  .yuda_combo_bottom {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .yuda_combo_card {
    padding: 30px;
  }

  .yuda_combo_card_title {
    font-size: 18px;
  }

  .yuda_combo_card_desc {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 768px) {
  .yuda_combo_wrap {
    padding: 50px 0 60px;
  }

  .yuda_combo_title {
    font-size: 24px;
    line-height: 24px;
  }

  .yuda_combo_subtitle {
    font-size: 16px;
  }

  .yuda_combo_treatment {
    padding: 24px 20px;
    gap: 16px;
  }

  .yuda_combo_treatment_title {
    font-size: 18px;
  }

  .yuda_combo_treatment_desc {
    font-size: 14px;
  }

  .yuda_combo_card {
    padding: 20px;
    gap: 16px;
  }

  .yuda_combo_icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 13px;
  }

  .yuda_combo_icon svg {
    width: 22px;
    height: 22px;
  }

  .yuda_combo_card_title {
    font-size: 16px;
    line-height: 22px;
  }

  .yuda_combo_card_desc {
    font-size: 14px;
    line-height: 21px;
  }
}

/* 유다약 4원칙 섹션 */
.yuda_principle_wrap {
  background: #F4F2F1;
  padding: 96px 0 120px;
}

.yuda_principle_title {
  text-align: center;
  color: #222;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
}

.yuda_principle_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 80px;
}

.yuda_principle_card {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 33px 57px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #E4E1DD;
}

.yuda_principle_icon {
  width: 69px;
  height: 69px;
  min-width: 69px;
  background: #F9F7F5;
  border-radius: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.yuda_principle_icon svg {
  width: 26px;
  height: 26px;
}

.yuda_principle_text {
  color: #1A1A1A;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.22px;
}

@media (max-width: 1024px) {
  .yuda_principle_wrap {
    padding: 60px 0 80px;
  }

  .yuda_principle_title {
    font-size: 32px;
  }

  .yuda_principle_cards {
    margin-top: 40px;
    gap: 16px;
  }

  .yuda_principle_card {
    padding: 24px 30px;
    gap: 20px;
  }

  .yuda_principle_text {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 768px) {
  .yuda_principle_wrap {
    padding: 50px 0 60px;
  }

  .yuda_principle_title {
    font-size: 24px;
    line-height: 24px;
  }

  .yuda_principle_cards {
    grid-template-columns: 1fr;
    margin-top: 30px;
    gap: 12px;
  }

  .yuda_principle_card {
    padding: 20px 24px;
    gap: 16px;
  }

  .yuda_principle_icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 13px;
  }

  .yuda_principle_icon svg {
    width: 22px;
    height: 22px;
  }

  .yuda_principle_text {
    font-size: 14px;
    line-height: 22px;
  }
}

/* 시술 특징 카드 반응형 */

@media (max-width: 1400px) {
  .procedure_feature_cards {
    gap: 20px;
  }
}

@media (max-width: 1300px) {

  .procedure_feature_cards {
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }

  .procedure_feature_card {
    width: 100%;
  }

  .procedure_feature_wrap {
    padding: 60px 0;
  }

  .procedure_feature_title {
    font-size: 28px;
    line-height: 28px;
  }

  .procedure_feature_desc {
    font-size: 16px;
  }

  .procedure_feature_cards {
    flex-direction: column;
    gap: 20px;
  }

  .card_divider {
    flex-direction: row;
  }

  .procedure_feature_card .card_content {
    min-height: auto;
    gap: 16px;
  }

  .procedure_feature_card .card_title {
    /* 세로 배치라 카드 간 높이를 맞출 필요가 없음 */
    min-height: auto;
  }

  .procedure_feature_card .card_tags,
  .procedure_feature_card .card_checks {
    margin-top: 0;
    min-height: auto;
  }

  .procedure_feature_card .card_desc {
    height: auto;
    text-align: center;
  }

  .procedure_feature_bg {
    display: none;
  }
}

/* 이미지 포함 시술 소개 */
.img_intro_wrapper .intro_box {
  display: flex;
  align-items: center;
  gap: 40px;
}

.img_intro_wrapper .intro_tit {
  flex: 1 1 50%;
}

.img_intro_wrapper .intro_img {
  flex: 1 1 50%;
  text-align: right;
}

.img_intro_wrapper .intro_img img {
  max-width: 100%;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .img_intro_wrapper .intro_box {
    flex-direction: column;
    gap: 32px;
  }

  .img_intro_wrapper .intro_tit,
  .img_intro_wrapper .intro_img {
    flex: 1 1 100%;
  }
}

/* 시술 특징 하단 이미지 */
.procedure_feature_doctor {
  margin: 24px 0 32px;
  display: flex;
  justify-content: center;
}

.procedure_feature_doctor img {
  width: min(600px, 100%);
  height: auto;
  display: block;
  border-radius: 14px;
}

@media (max-width: 768px) {
  .procedure_feature_doctor {
    margin: 20px 0 26px;
  }

  .procedure_feature_doctor img {
    border-radius: 12px;
  }

  .procedure_feature_desc br {
    display: none;
  }
}

/* 유다주사 상표등록증 이미지 */
/* 유다주사 왜 유다주사일까 섹션 */
.judas_why_section {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(160deg, #2c2520 0%, #3d3530 40%, #2a2420 100%);
  overflow: hidden;
}

.judas_why_section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(121, 106, 86, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.judas_why_top {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
}

.judas_why_txt {
  flex: 1;
}

.judas_why_txt .principle_title {
  color: #fff;
}

.judas_why_txt .p_20 {
  color: rgba(255, 255, 255, 0.75);
}

.judas_why_txt .gold_p {
  color: #c4a97d;
}

.judas_cert_area {
  flex-shrink: 0;
  width: 320px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.judas_cert_area img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.judas_why_section .yuda_flex_box {
  position: relative;
}

.judas_why_section .yuda_tit_box {
  background: rgba(121, 106, 86, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

.judas_why_section .yuda_con {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.judas_why_section .yuda_con p {
  color: rgba(255, 255, 255, 0.85);
}

@media all and (max-width: 1200px) {
  .judas_why_top {
    gap: 40px;
  }

  .judas_cert_area {
    width: 260px;
    padding: 24px;
  }
}

@media all and (max-width: 768px) {
  .judas_why_section {
    padding: 80px 0;
  }

  .judas_why_top {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .judas_cert_area {
    width: min(280px, 80%);
    padding: 24px;
  }

  .content_sub_banner .banner_text p {
    text-wrap: balance;
  }

  .content_sub_banner .banner_text p br {
    display: none;
  }
}



.intro_wrap .intro_img {
  /* height: 100%; */
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.img_intro_wrapper .intro_img img {
  max-width: 550px;
}

/* .intro_wrap .intro_img img {
  width: 100%;
  height: 100%;
  max-height: 100%;
} */


@media (max-width: 768px) {
  .img_intro_wrapper .intro_img img {
    max-width: 100% !important;
  }
}

/* 브랜드 스토리 지표 (Brand Story Metrics) */
.metrics_container {
    padding: 60px;
    background: rgba(255, 255, 255, 0.70);
    border-radius: 60px 20px 60px 20px;
    outline: 1.5px solid white;
    outline-offset: -1.5px;
    backdrop-filter: blur(10px);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
.metrics_item {
    width: 285px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.metrics_title {
    color: #64504B;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}
.metrics_number_wrap {
    display: inline-flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    width: 100%;
}
.metrics_number_wrap.center {
    align-items: center;
}
.metrics_number {
    color: #5B5B5B;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}
.metrics_unit {
    color: #5B5B5B;
    font-size: 26px;
    font-weight: 700;
    word-wrap: break-word;
}
.metrics_bubble {
    padding: 10px 24px;
    background: #EFEDEB;
    border-radius: 90px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.metrics_bubble_text {
    color: #5B5B5B;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    word-wrap: break-word;
}
.metrics_divider {
    width: 2px;
    height: 110px;
    background: #FFFFFF;
}

/* ✅ 모바일 : '유메이비와 함께한 시간' 섹션의 지표 카드
   285px 카드 3개가 가로로 놓여(총 1100px 이상) 좁은 화면에서 잘려 나갔다. 세로 배치로 전환.
   (.bs_journey_* 오버라이드는 원본 선언이 이 아래에 있어 파일 맨 끝에 따로 둔다) */
@media (max-width: 1024px) {
    .metrics_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding: 32px 20px;
        gap: 28px;
        border-radius: 40px 16px 40px 16px;
    }

    .metrics_item {
        width: 100%;
        gap: 16px;
    }

    .metrics_title {
        font-size: 20px;
    }

    .metrics_number {
        font-size: 44px;
    }

    .metrics_unit {
        font-size: 20px;
    }

    .metrics_bubble {
        padding: 8px 18px;
    }

    .metrics_bubble_text {
        font-size: 14px;
    }

    .metrics_divider {
        width: 100%;
        height: 2px;
    }
}

/* ===== 브랜드 스토리 히어로 (리디자인 2026-07-22) ===== */
.bs_main_banner {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 42vw, 700px);
  /* 밝은 웜 아이보리 → 소프트 샴페인 그라데이션 (페이지 무드) */
  background: linear-gradient(120deg, #F7F4EF 0%, #ECE5DB 58%, #E2D8CB 100%);
  overflow: hidden;
  /* 콘텐츠(inner)를 섹션 높이 안에서 세로 중앙정렬 */
  display: flex;
  align-items: center;
}

/* 콘텐츠를 min(1400px, 90%) 컨테이너 안에 배치 */
.bs_main_banner_inner {
  position: relative;
  z-index: 1;
  width: min(1400px, 90%);
  margin: 0 auto;
  min-height: clamp(440px, 42vw, 700px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 80px);
}

/* 텍스트 */
.bs_main_banner_txt {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
  max-width: 560px;
  flex: 1 1 auto;
}

.bs_main_banner_txt_dot{
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
  /* max-width: 560px; */
  flex: 1 1 auto;
}

/* [점·비립종·사마귀·쥐젖 전용] 타이틀 줄바꿈 없이 한 줄 유지.
   기본 5vw 로는 1300px 부근에서 두 줄로 넘어가서 4vw 로 낮춤 */
.bs_main_banner_txt_dot .bs_main_banner_tit {
  white-space: nowrap;
  font-size: clamp(24px, 4vw, 68px);
}

/* 눈썹(아이브로우) + 리딩 라인 */
.bs_main_banner_subtit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #9C6A38;
  font-family: Pretendard, sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.bs_main_banner_subtit::before {
  content: "";
  width: clamp(28px, 3vw, 32px);
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

/* 타이틀 (2-tone 에디토리얼) */
.bs_main_banner_tit {
  color: #2E2620;
  font-family: Pretendard, sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0;
}

.bs_main_banner_tit p {
  font-size: 40px; line-height: 1.5;
}

.bs_main_banner_tit em {
  font-style: normal;
  color: #C0925B;
}

.bs_main_banner_desc {
  word-break: keep-all !important;
  color: #6E5F52;
  font-family: Pretendard, sans-serif;
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin: 4px 0 0;
  max-width: 36ch;
}

/* 이미지: 투명 인물 컷아웃 (드롭섀도우) — 섹션 확대에 맞춰 크게 */
.bs_main_banner_img_box {
  position: relative;
  flex: 0 0 auto;
  width: clamp(340px, 34vw, 560px);
  height: clamp(400px, 40vw, 660px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
}

/* 인물 컷아웃 — 박스 높이 100%로 크게 표시 */
.bs_main_banner_img {
  padding-top: 30px;
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 26px rgba(90, 66, 50, 0.25));
}

/* 태블릿·모바일: 세로 스택, 중앙 정렬 */
@media (max-width: 900px) {
  .bs_main_banner_tit p {
  font-size: 22px !important; line-height: 1.5;
  }
  .bs_main_banner {
    min-height: 0;
    padding: clamp(48px, 9vw, 72px) 0 clamp(52px, 10vw, 80px);
  }

  .bs_main_banner_img{
    padding-top: 0;
  }

  .bs_main_banner_inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
    gap: clamp(32px, 7vw, 48px);
  }

  .bs_main_banner_txt {
    align-items: center;
    /* max-width: 60%; */
    order: 1;
  }

  .bs_main_banner_subtit {
    justify-content: center;
  }

  /* 모바일에서는 눈썹 앞 액센트 라인 숨김 */
  .bs_main_banner_subtit::before {
    display: none;
  }

  .bs_main_banner_desc {
    max-width: 100%;
  }

  .bs_main_banner_img_box {
    order: 2;
    width: min(340px, 84vw);
    height: min(420px, 104vw);
  }
}

/* ===== [유다주사 전용] 배너 인물 이미지 =====
   .bs_main_banner_img_box / .bs_main_banner_img 는 서브페이지 33곳에서 공용으로
   쓰이므로, 유다주사 이미지(judas_person.png)만 따로 조절할 수 있게 분리했습니다.
   크기·위치 조정은 아래 변수 2개만 수정하면 됩니다.
   (다른 페이지에는 영향 없음)

   - 영역을 원본 비율(1129:754)로 잡아 이미지 안쪽 빈 여백을 없앴고,
     배너 높이에서 위아래 여백(--judas-pad)을 뺀 만큼을 이미지 높이로 쓰기 때문에
     상·하 여백이 항상 정확히 동일합니다. */
.bs_main_banner_img_box.bs_main_banner_img_box_judas {
  --judas-pad: 80px;                              /* 배너 상·하 여백 */
  --judas-banner-h: clamp(440px, 42vw, 700px);    /* .bs_main_banner 의 min-height 와 동일하게 유지 */
  --judas-shift: 0px;                             /* 아래로 내림(+) / 위로 올림(-) */

  width: auto;
  height: calc(var(--judas-banner-h) - var(--judas-pad) * 2);
  aspect-ratio: 1129 / 754;
  margin-top: var(--judas-pad);
  margin-bottom: var(--judas-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transform: translateY(var(--judas-shift));
}

.bs_main_banner_img.bs_main_banner_img_judas {
  width: 90%;
  height: 90%;
  max-width: none;
  padding-top: 0;
  object-fit: contain;
  object-position: center center;
}

/* 태블릿·모바일: 세로 스택이라 배너 높이 기준이 아닌 가로 폭 기준으로 전환 */
@media (max-width: 900px) {
  .bs_main_banner_img_box.bs_main_banner_img_box_judas {
    --judas-shift: 0px;

    width: min(520px, 92vw);
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* ===== [남자제모 전용] 배너 인물 이미지 =====
   배너 높이를 그대로 이미지 높이로 써서 하단 여백 없이 바닥에 붙게 처리.
   크기는 --man-scale 만 조절하면 됩니다. (1 = 배너 높이와 동일, 1.1 = 10% 확대) */
.bs_main_banner_img_box.bs_main_banner_img_box_manwaxing {
  --man-scale: 1;
  --man-banner-h: clamp(440px, 42vw, 700px);   /* .bs_main_banner 의 min-height 와 동일하게 유지 */

  align-self: flex-end;                        /* 배너 하단에 밀착 */
  width: auto;
  height: calc(var(--man-banner-h) * var(--man-scale));
  aspect-ratio: 1 / 1;                         /* 원본 797×797 정비율 */
  margin: 0;
  padding: 0;
}

.bs_main_banner_img.bs_main_banner_img_manwaxing {
  /* 하단 블렌딩 강도 — 값이 클수록 더 넓게 흐려짐 */
  --man-fade-b: 40%;

  width: 100%;
  height: 100%;
  max-width: none;
  padding-top: 0;
  object-fit: contain;
  object-position: bottom center;

  /* 이미지 하단이 배너 바닥에서 직각으로 잘려 보이지 않도록 배경으로 녹임 */
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 calc(100% - var(--man-fade-b)),
      rgba(0, 0, 0, 0.45) calc(100% - var(--man-fade-b) * 0.5),
      rgba(0, 0, 0, 0.12) calc(100% - var(--man-fade-b) * 0.2),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 calc(100% - var(--man-fade-b)),
      rgba(0, 0, 0, 0.45) calc(100% - var(--man-fade-b) * 0.5),
      rgba(0, 0, 0, 0.12) calc(100% - var(--man-fade-b) * 0.2),
      transparent 100%);
}

/* 태블릿·모바일: 세로 스택 — 가로 폭 기준으로 전환 */
@media (max-width: 900px) {
  .bs_main_banner_img_box.bs_main_banner_img_box_manwaxing {
    align-self: center;
    width: min(460px, 88vw);
    height: auto;
  }
}

/* ===== [여자제모 전용] 배너 인물 이미지 =====
   크기는 --woman-scale, 하단 블렌딩은 --woman-fade-b 로 조절 */
.bs_main_banner_img_box.bs_main_banner_img_box_womanwaxing {
  --woman-scale: 1.03;                            /* 공용 기본 대비 확대 비율 */
  --woman-h: clamp(400px, 40vw, 660px);           /* .bs_main_banner_img_box 기본 높이 */

  width: auto;
  height: calc(var(--woman-h) * var(--woman-scale));
  aspect-ratio: 749 / 746;                        /* 원본 749×746 정비율 */
  align-items: flex-end;
  justify-content: center;
}

.bs_main_banner_img.bs_main_banner_img_womanwaxing {
  /* 하단 블렌딩 강도 — 값이 클수록 더 넓게 흐려짐 */
  --woman-fade-b: 40%;

  width: 100%;
  height: 100%;
  max-width: none;
  padding-top: 0;
  object-fit: contain;
  object-position: bottom center;

  /* 이미지 하단이 직각으로 잘려 보이지 않도록 배경으로 녹임 */
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 calc(100% - var(--woman-fade-b)),
      rgba(0, 0, 0, 0.45) calc(100% - var(--woman-fade-b) * 0.5),
      rgba(0, 0, 0, 0.12) calc(100% - var(--woman-fade-b) * 0.2),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 calc(100% - var(--woman-fade-b)),
      rgba(0, 0, 0, 0.45) calc(100% - var(--woman-fade-b) * 0.5),
      rgba(0, 0, 0, 0.12) calc(100% - var(--woman-fade-b) * 0.2),
      transparent 100%);
}

/* 태블릿·모바일: 세로 스택 — 가로 폭 기준으로 전환 */
@media (max-width: 900px) {
  .bs_main_banner_img_box.bs_main_banner_img_box_womanwaxing {
    width: min(460px, 88vw);
    height: auto;
  }
}

/* ===== [아르기닌 수액 전용] 배너 이미지 =====
   원본 비율(738×754)로 영역을 잡고 크기만 조정 */
.bs_main_banner_img_box.bs_main_banner_img_box_arginine {
  --argi-h: clamp(380px, 38vw, 620px);             /* 이미지 높이 */

  width: auto;
  height: var(--argi-h);
  aspect-ratio: 738 / 754;                         /* 원본 738×754 정비율 */
  align-items: center;
  justify-content: center;
}

.bs_main_banner_img.bs_main_banner_img_arginine {
  width: 100%;
  height: 100%;
  max-width: none;
  padding-top: 0;
  object-fit: contain;
  object-position: center center;
}

/* 태블릿·모바일: 세로 스택 — 가로 폭 기준으로 전환 */
@media (max-width: 900px) {
  .bs_main_banner_img_box.bs_main_banner_img_box_arginine {
    width: min(440px, 88vw);
    height: auto;
  }
}

/* ===== 유메이비 서브 히어로 (의료진소개·오시는길) =====
   브랜드스토리 히어로와 텍스트 스타일·높이를 통일, 배경사진은 그대로 유지.
   .content_sub_banner 공통을 건드리지 않도록 .hero_umeib 로만 스코프. */
.content_sub_banner.hero_umeib {
  aspect-ratio: auto;
  min-height: 700px;
  display: flex;
  align-items: center;
}

.content_sub_banner.hero_umeib .content_banner_inner {
  height: auto;
  min-height: 700px;
  justify-content: flex-start;
}

.content_sub_banner.hero_umeib .banner_text {
  width: 100%;
  max-width: 620px;
  gap: clamp(14px, 1.4vw, 20px);
}

/* 눈썹(아이브로우) + 리딩 라인 — 브랜드스토리와 동일 */
.content_sub_banner.hero_umeib .banner_text span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  color: #9C6A38;
  font-family: Pretendard, sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.content_sub_banner.hero_umeib .banner_text span::before {
  content: "";
  width: clamp(28px, 3vw, 32px);
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

/* 타이틀 — 브랜드스토리와 동일 */
.content_sub_banner.hero_umeib .banner_text h2 {
  color: #2E2620;
  font-family: Pretendard, sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0;
}

/* 설명 — 브랜드스토리와 동일 */
.content_sub_banner.hero_umeib .banner_text p {
  color: #6E5F52;
  font-family: Pretendard, sans-serif;
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin: 4px 0 0;
}

/* 태블릿·모바일: 세로 중앙정렬 + 레거시 다크 오버레이 제거 */
@media (max-width: 1024px) {
  .bs_main_banner_tit p {
  font-size: 32px; line-height: 1.5;
  }

  .content_sub_banner.hero_umeib {
    min-height: 670px;
    aspect-ratio: auto;
    padding: clamp(48px, 9vw, 72px) 0;
  }

  .content_sub_banner.hero_umeib .content_banner_inner {
    min-height: 0;
    justify-content: center;
    text-align: center;
  }

  .content_sub_banner.hero_umeib .banner_text {
    align-items: center;
    max-width: 100%;
    text-align: center;
  }

  .content_sub_banner.hero_umeib .banner_text span {
    justify-content: center;
  }

  /* 눈썹 앞 라인 + 레거시 어두운 오버레이 모두 숨김 → 밝은 사진 유지 */
  .content_sub_banner.hero_umeib ::before {
    display: none;
  }

  .content_sub_banner.hero_umeib::after {
    display: none;
  }
}

/* judas: 텍스트 스타일은 hero_umeib(브랜드스토리풍) 그대로 사용하되,
   높이만 브랜드스토리와 동일(700px clamp)하게 되돌림. 데스크톱(>1024px)만 적용. */
@media (min-width: 1025px) {
  .content_sub_banner.hero_umeib.hero_h700,
  .content_sub_banner.hero_umeib.hero_h700 .content_banner_inner {
    min-height: clamp(440px, 42vw, 700px);
  }
}

/* judas: 배경 인물을 '배경사진'이 아니라 '떠 있는 컷아웃'으로
   (브랜드스토리 닥터 사진 스타일). 텍스트 왼쪽 / 인물 오른쪽. */
.content_sub_banner.hero_person .content_banner_inner {
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}

.content_sub_banner.hero_person .banner_person {
  flex: 0 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.content_sub_banner.hero_person .banner_person img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(560px, 44vw);
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 22px 36px rgba(120, 84, 60, 0.30));
}

/* 모바일: 텍스트 위 / 인물 아래로 세로 스택 */
@media (max-width: 1024px) {
  .content_sub_banner.hero_person .content_banner_inner {
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 5vw, 40px);
  }

  .content_sub_banner.hero_person .banner_person {
    align-self: center;
  }

  .content_sub_banner.hero_person .banner_person img {
    max-width: min(420px, 82vw);
    max-height: none;
  }
}

.treatment_target_wrap.bg_fafafa { background: #FAFAFA; }

/* [브랜드스토리 추천대상 전용] 인물 이미지 하단 블렌딩 —
   .img_box img 는 공용이라 이미지 전용 클래스로만 스코프 */
.bs_target_person_img {
    --bs-target-fade-b: 30%;
    /* 하단 블렌딩 강도 */

    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 calc(100% - var(--bs-target-fade-b)),
            rgba(0, 0, 0, 0.45) calc(100% - var(--bs-target-fade-b) * 0.5),
            rgba(0, 0, 0, 0.12) calc(100% - var(--bs-target-fade-b) * 0.2),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 calc(100% - var(--bs-target-fade-b)),
            rgba(0, 0, 0, 0.45) calc(100% - var(--bs-target-fade-b) * 0.5),
            rgba(0, 0, 0, 0.12) calc(100% - var(--bs-target-fade-b) * 0.2),
            transparent 100%);
}
.treatment_target_box.gap_80 { gap: 80px; }
.treatment_target_wrap.bg_f5 { background: #F5F5F5; }

.bs_journey_sec { width: 100%; height: 820px; position: relative; background: linear-gradient(0deg, rgba(148, 136, 120, 0.50) 0%, rgba(148, 136, 120, 0.50) 100%), url('/img/new_bs_img01.png') center / cover no-repeat; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.bs_journey_inner { flex-direction: column; justify-content: flex-start; align-items: center; gap: 60px; display: inline-flex; }
.bs_journey_txt_wrap { flex-direction: column; justify-content: flex-start; align-items: center; gap: 48px; display: flex; }
.bs_journey_tit_box { width: 442.88px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; display: flex; }
.bs_journey_subtit { justify-content: center; display: flex; flex-direction: column; color: white; font-size: 20px; font-family: Pretendard; font-weight: 500; text-transform: uppercase; line-height: 26px; letter-spacing: 0.20px; word-wrap: break-word; }
.bs_journey_tit { align-self: stretch; height: 52px; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 40px; font-family: Pretendard; font-weight: 700; line-height: 52px; word-wrap: break-word; text-align: center; }
.bs_journey_desc { text-align: center; justify-content: center; display: flex; flex-direction: column; color: white; font-size: 18px; font-family: Pretendard; font-weight: 400; line-height: 28.80px; letter-spacing: 0.10px; word-wrap: break-word; }

.bs_img_center { margin: 30px auto; max-width: 600px; width: 100%; display: block; }
/* 브랜드스토리 배너 — 전문성이 느껴지도록 어두운 톤으로 오버레이 */
.treatment_advantage_wrap.bg_banner {
    background:
        linear-gradient(180deg, rgba(18, 14, 10, 0.86) 0%, rgba(24, 19, 14, 0.80) 45%, rgba(12, 9, 6, 0.94) 100%),
        url('/img/brand_banner_bg.jpg') no-repeat center / cover;
    background-color: #15100C;
}

/* [브랜드스토리 배너 전용] 인물 이미지 — 크기 확대 + 하단 블렌딩.
   .bs_img_center 는 같은 페이지 위쪽 이미지에도 쓰이므로 전용 클래스로 분리 */
.treatment_advantage_wrap.bg_banner .bs_banner_person_img {
    --bs-person-w: 760px;
    /* 이미지 최대 폭 (기본 600px) */
    --bs-person-fade-b: 34%;
    /* 하단 블렌딩 강도 */

    max-width: var(--bs-person-w);
    margin: 24px auto 0;

    -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 calc(100% - var(--bs-person-fade-b)),
            rgba(0, 0, 0, 0.45) calc(100% - var(--bs-person-fade-b) * 0.5),
            rgba(0, 0, 0, 0.12) calc(100% - var(--bs-person-fade-b) * 0.2),
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 calc(100% - var(--bs-person-fade-b)),
            rgba(0, 0, 0, 0.45) calc(100% - var(--bs-person-fade-b) * 0.5),
            rgba(0, 0, 0, 0.12) calc(100% - var(--bs-person-fade-b) * 0.2),
            transparent 100%);
}
.treatment_advantage_box.gap_24 { gap: 24px; }
.txt_box.text_center { text-align: center; }
.section.pad_80 { padding: 80px 0; }
.p_24.c_222 { color: #222; }
.p_18.lh_150 { line-height: 150%; }

/* [브랜드스토리 배너 전용] 섹션 높이 축소 + 요소 간격 압축.
   .bg_banner 로만 한정 → .treatment_advantage_wrap 을 쓰는 다른 시술 페이지엔 영향 없음 */
.treatment_advantage_wrap.bg_banner {
    padding: 56px 0 48px;
}

.treatment_advantage_wrap.bg_banner .treatment_advantage_box.gap_24 {
    gap: 14px;
}

.treatment_advantage_wrap.bg_banner .txt_box .h_64 {
    font-size: 44px;
    margin-top: 0;
}

.treatment_advantage_wrap.bg_banner .bs_banner_person_img {
    /* 원본이 2000x2000 정사각 이미지라 폭이 곧 높이.
       이미지는 키우되 늘어난 높이만큼 음수 마진으로 상쇄 → 섹션 총높이는 그대로 유지
       (10 + 680 - 154 = 536px, 이전 16 + 560 - 40 과 동일) */
    --bs-person-w: 680px;
    --bs-person-fade-b: 44%;
    /* 겹치는 구간이 확실히 투명해지도록 페이드 범위 확대 (34% → 44%) */

    /* 원본 PNG 상단 약 22%(680px 기준 ≈153px)가 alpha=0 투명 영역이라
       음수 상단 마진으로 끌어올려도 위 제목을 가리지 않는다.
       -60 + 680 - 84 = 536px 로 섹션 총높이는 그대로 유지 */
    margin: -60px auto -84px;
}

.treatment_advantage_wrap.bg_banner .banner_txt_box p {
    font-size: 18px;
    line-height: 150%;
}

@media (max-width: 1024px) {
    .treatment_advantage_wrap.bg_banner {
        padding: 44px 0 40px;
    }

    .treatment_advantage_wrap.bg_banner .txt_box .h_64 {
        font-size: 32px;
    }

    .treatment_advantage_wrap.bg_banner .bs_banner_person_img {
        /* -40 + 520 - 60 = 420px (총높이 유지) */
        --bs-person-w: 520px;
        margin: -40px auto -60px;
    }
}

@media (max-width: 768px) {
    .treatment_advantage_wrap.bg_banner {
        padding: 36px 0 32px;
    }

    .treatment_advantage_wrap.bg_banner .txt_box .h_64 {
        font-size: 24px;
    }

    .treatment_advantage_wrap.bg_banner .bs_banner_person_img {
        /* -30 + 380 - 44 = 306px (총높이 유지) */
        --bs-person-w: 380px;
        margin: -30px auto -44px;
    }

    .treatment_advantage_wrap.bg_banner .banner_txt_box p {
        font-size: 14px;
        line-height: 1.7;
    }
}

@media (max-width: 1024px) {
    .treatment_target_wrap .tit h2 br {
        display: none;
    }
}
/* ✅ 모바일 : '유메이비와 함께한 시간' 섹션 (원본 .bs_journey_* 선언 이후에 와야 적용됨)
   높이 820px 고정 + overflow:hidden 때문에 내용이 잘려 나가던 문제 해결 */
@media (max-width: 1024px) {
    .bs_journey_sec {
        height: auto;
        padding: 60px 0;
    }

    .bs_journey_inner {
        display: flex;
        width: 93.75%;
        max-width: 560px;
        gap: 40px;
    }

    .bs_journey_txt_wrap {
        width: 100%;
        gap: 24px;
    }

    .bs_journey_tit_box {
        width: 100%;
    }

    .bs_journey_tit {
        height: auto;
        font-size: 26px;
        line-height: 1.35;
    }

    .bs_journey_desc {
        font-size: 14px;
        line-height: 1.7;
    }

    .bs_journey_desc br {
        display: none;
    }
}

/* ===== 모바일 본문(Body 1) 폰트 통일 : 14px =====
   PC 기준 18px 로 잡혀 있던 본문 문단들을 모바일에서 14px 로 맞춘다.
   제목·라벨·수치 등 별도 크기를 가진 요소는 그대로 둔다. */
@media (max-width: 768px) {

    body {
        font-size: 14px;
    }

    /* 클래스로 크기를 지정하지 않은 일반 문단 */
    .content p:not([class]),
    .content li:not([class])>p:not([class]) {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Body 1 유틸리티 */
    .p_18 {
        font-size: 14px;
        line-height: 1.7;
    }

    /* 시술 소개 본문 */
    .intro_wrap .intro_box p,
    .intro_wrap .intro_box .intro_tit p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* 주의사항 카드 */
    .treatment_caution_wrap .treatment_caution_box .card_box .card p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* 시술 장점 카드 */
    .treatment_advantage_wrap .card_box .card p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Q&A 답변 */
    .accordion .accordion_inner ul li .accordion_content .inner {
        font-size: 14px;
        line-height: 1.7;
    }

    /* 서브 히어로 설명문 */
    .sub_hero_description {
        font-size: 14px;
        line-height: 1.7;
    }

    /* 유메이비 원칙 설명 */
    .umeib_principles_description,
    .umeib_principles_content {
        font-size: 14px;
        line-height: 1.7;
    }

    .umeib_principles_description p + p {
        margin-top: 18px;
    }

    /* 대표원장 이력 */
    .doctor_section .career_item p {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ===== 모바일 : 읽는 정보(본문)는 전부 14px 로 통일 =====
   PC 기준 15~21px 로 제각각이던 설명 문단·리스트 문구를 한 크기로 맞춘다.
   제목(h2/h3), 숫자 지표, 버튼, 탭 라벨 등은 대상이 아니다.
   컴포넌트별 규칙이 선택자 우선순위가 높아 !important 로 일괄 적용한다. */
@media (max-width: 768px) {

    .content p,
    .content li,
    .content dd,
    .content .card_text,
    .content [class*="_desc"],
    .content [class*="_description"],
    .content .p_16,
    .content .p_18,
    .content .p_20,
    .content .caution_list p,
    .content .sisul_info p,
    .content .accordion_content .inner {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* 목록 앞머리 라벨(효과:, 특징:, 추천 대상: 등)은 굵게 해서 위계 구분 */
    .content li p span,
    .content li p b,
    .content .sisul_info p b {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #2E2E2E;
    }

    /* 회차별 안내 A/B 표기 등 강조 색은 유지 */
    .content .gold_p {
        color: #796A56;
    }
}

/* 위 14px 일괄 규칙에서 제외 : 라벨·제목 성격의 짧은 텍스트 */
@media (max-width: 768px) {

    /* 시술 특징 탭 버튼 */
    .content .feature_teb_meun p {
        font-size: 16px !important;
        font-weight: 700;
        line-height: 1.4 !important;
    }

    /* 회차별 안내 프로그램명 */
    .content .sisul_tit p {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* 회차별 안내 반복 횟수 표기 */
    .content .sisul_times p {
        font-size: 14px !important;
    }
}

/* ===== 섹션 제목 크기 통일 : 모바일 32px =====
   시술 소개 28 / 시술 특징 24 / 시술 효과 32 / 시술 장점 34 처럼
   섹션마다 제각각이던 제목 크기를 한 값으로 맞춘다. */
@media (max-width: 1024px) {

    .intro_wrap .intro_box h2,
    .intro_wrap .intro_box .intro_tit h2,
    .treatment_feature_wrap .treatment_feature_box .txt_box h2,
    .treatment_effect_wrap .treatment_effect_box .txt_box h2,
    .treatment_advantage_wrap .txt_box h2,
    .treatment_target_wrap .tit h2,
    .treatment_principle .principle_title,
    .treatment_process .process_title,
    .accordion .accordion_inner h2,
    .h_40,
    .procedure_feature_title,
    .sculptra_feature_title,
    .sculptra_program_title,
    .thermage_flx_title,
    .ulthera_prime_title,
    .judas_process_title,
    .yuda_combo_title,
    .yuda_principle_title,
    .umeib_principles_main_title,
    .umeib_principles_section_title,
    .bs_journey_title,
    .bs_journey_tit,
    .ruby_intro_tit {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
}

/* PC 섹션 제목도 40px 로 통일 (일부 페이지만 36px 이던 것 정리) */
@media (min-width: 1025px) {

    .thermage_flx_title,
    .ulthera_prime_title,
    .sculptra_feature_title,
    .sculptra_program_title,
    .umeib_principles_main_title,
    .umeib_principles_section_title {
        font-size: 40px;
    }
}