/* ============================================================
   index.css - 갈더마 정품인증 페이지 스타일
   ============================================================ */
body section img {max-width: 100%;}
p, ul, li {padding: 0; margin: 0;}
button, a {color: inherit; text-decoration: none; cursor: pointer;}
sup {position: relative; top: 4px;}
address {font-style: normal;}
.pc-block {display: block;}
.m-block {display: none;}
/* === 페이지 최상위 컨테이너 === */
.pc-1 {
  width: 100%;
  max-width: 100%;
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
  z-index: 0;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-gray-100);
  font-family: var(--font-pretendard);
}

/* === 히어로 섹션 (헤더 + 배너 이미지) === */
.hero-section {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  z-index: 8;
  flex-shrink: 0;
}

.hero-section .section-inner {
  position: absolute;
  padding: 250px 361px 251px;
}
/* --- 상단 내비게이션 헤더 --- */
.site-header {
  width: 100%;
  height: 120px;
  margin: 0 !important;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  background-color: var(--color-lavenderblush);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 38px 0 35px;
  box-sizing: border-box;
  gap: 8px;
  z-index: 99;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-gray-600);
  font-family: var(--font-pretendard);
}

/* 갈더마 로고 */
.galderma-logo {
  height: 47px;
  width: 260px;
  position: relative;
  object-fit: cover;
}

/* 헤더 내비게이션 링크 영역 */
.header-nav {
  flex: 1;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  right: 15%; 
  box-sizing: border-box;
  min-width: 162px;
  max-width: 266px;
}

/* 내비게이션 텍스트 */
.header-nav-text {
  display: flex;
  justify-content: center;
  column-gap: 12px;
  align-items: center;
  position: relative;
  line-height: 150%;
  flex-shrink: 0;
}

/* 일반 텍스트 (줄바꿈 유지) */
.text-preserve-whitespace {
  color: inherit;
  text-decoration: none;
  white-space: pre-wrap;
}

/* 구분자 (반투명) */
.nav-divider {
  font-weight: 100;
  color: var(--color-gray-500);
}

/* --- 히어로 배너 이미지 --- */
.banner-image {
  display: flex;
  align-self: stretch;
  position: relative;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 1;
}

/* === 갈더마 소개 카드 (히어로 내 오버레이) === */
.galderma-intro-card {
  position: relative;
  width: fit-content;
  margin: 0 0 47px !important;
  border-radius: 12px;
  background-color: var(--color-lavenderblush);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 38px 40px 36px;
  box-sizing: border-box;
  row-gap: 17px;
  z-index: 9;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-gray-400);
}

/* 카드 내 로고 래퍼 */
.card-logo-wrapper {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 1.9px;
  box-sizing: border-box;
  max-width: 123.9px;
}

/* 카드 내 로고 이미지 */
.card-logo-image {
  height: 22px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  flex-shrink: 0;
}

/* 카드 소개 문구 */
.galderma-intro-text {
  align-self: stretch;
  position: relative;
  line-height: 20px;
  margin: 0;
}

/* === 이벤트 제목 텍스트 (오버레이) === */
.event-title {
  position: relative;
  margin: 0 0 17px;
  font-size: 48px;
  font-weight: 700;
  font-family: inherit;
  color: var(--color-white);
  display: inline-block;
  z-index: 10;
  flex-shrink: 0;
}

/* 이벤트 서브타이틀 */
.event-subtitle {
  position: relative;
  margin: 0 !important;
  line-height: var(--lh-28);
  color: var(--color-white);
  z-index: 9;
  flex-shrink: 0;
}

.sculptra-section {
  display: block;
  width: 100%;
  height: fit-content;
  position: relative;
}
.sculptra-section .section-inner {
  display: block;
  padding: 76px 363px 131px;
  position: absolute;
  z-index: 9;
  top: 0

}

/* === 스컬트라 섹션 텍스트 (오버레이) === */
/* 스컬트라 슬로건 제목 */
.sculptra-slogan-title {
  margin: 50px 0 18px;
  font-size: var(--fs-36);
  line-height: 50px;
}

.sculptra-logo {
  width: 210px;
  height: 107px;
}

/* 가는 폰트 강조 */
.font-light {
  font-weight: 100;
}


/* 스컬트라 설명 텍스트 (FDA/CE 인증 포함) */
.sculptra-description {
  margin: 0;
  font-weight: 300;
}

.sculptra-desc-line {
  line-height: var(--lh-28);
  display: block;
  margin-bottom: 6px;
  white-space: pre-wrap;
}

/* 스컬트라 정품인증 CTA 버튼 */
.sculptra-cta-button {
  cursor: pointer;
  border: none;
  padding: var(--padding-20);
  background-color: var(--color-mediumvioletred);
  width: 269px;
  height: 61px;
  margin: 83px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.sculptra-cta-button:hover {
  background-color: #7e0e49;
}

.sculptra-cta-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* CTA 버튼 텍스트 */
.cta-button-label {
  position: relative;
  font-size: var(--fs-18);
  font-family: var(--font-pretendard);
  color: var(--color-white);
  text-align: center;
}

/* === 레스틸렌 섹션 === */
.restylane-section {
  align-self: stretch;
  background-color: var(--color-whitesmoke);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 128px 230px 131px 361px;
  position: relative;
  isolation: isolate;
  z-index: 10;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-10);
  color: var(--color-gray-100);
  font-family: var(--font-pretendard);
}

/* 레스틸렌 내부 레이아웃 */
.restylane-inner-layout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  gap: 30px 0px;
  max-width: 1327px;
  z-index: 2;
}

/* 레스틸렌 좌측 콘텐츠 컬럼 */
.restylane-content-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 1.9px;
  box-sizing: border-box;
  gap: 28px;
  text-align: left;
  font-size: var(--fs-36);
  color: var(--color-gray-100);
  font-family: var(--font-pretendard);
}

/* 레스틸렌 로고 이미지 */
.restylane-logo {
  width: 216px;
  height: 75px;
  position: relative;
  object-fit: cover;
}

/* 브랜드 제목 + 상표 기호 래퍼 */
.restylane-brand-heading {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

/* 레스틸렌 브랜드 제목 */
.restylane-brand-title {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 50px;
  display: inline-block;
  font-family: inherit;
}

/* 상표 기호 래퍼 */
.restylane-trademark-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 24.9px;
  font-size: var(--fs-16);
}

/* 상표 기호 */
.restylane-trademark-symbol {
  width: 11px;
  position: relative;
  font-weight: 500;
  display: inline-block;
  flex-shrink: 0;
}

/* 레스틸렌 설명 영역 (FDA/CE 인증) */
.restylane-description-wrapper {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 44px;
  box-sizing: border-box;
  max-width: 349px;
  font-size: var(--fs-18);
}

/* 레스틸렌 설명 텍스트 */
.restylane-description-text {
  flex: 1;
  position: relative;
  line-height: var(--lh-28);
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
}

/* 레스틸렌 정품인증 CTA 버튼 */
.restylane-cta-button {
  cursor: pointer;
  border: none;
  padding: var(--padding-20) 50px;
  background-color: var(--color-darkslateblue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.restylane-cta-button:hover {
  background-color: #011030;
}

.restylane-cta-button:focus {
  outline: 2px solid var(--color-darkslateblue);
  outline-offset: 2px;
}

/* 레스틸렌 CTA 버튼 텍스트 */
.restylane-cta-label {
  position: relative;
  font-size: var(--fs-18);
  font-family: var(--font-pretendard);
  color: var(--color-white);
  text-align: left;
}

/* 레스틸렌 우측 제품 이미지 */
.restylane-product-image {
  flex: 1;
  position: relative;
  max-width: 703px;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  min-width: 310px;
}

/* 레스틸렌 섹션 내 상표 기호 (절대 위치) */
.restylane-section-trademark {
  height: var(--height-28);
  width: 7px;
  position: absolute;
  margin: 0 !important;
  top: calc(50% + 25.5px);
  left: 426px;
  line-height: var(--lh-28);
  font-weight: 300;
  display: inline-block;
  z-index: 1;
}

/* === 푸터 영역 === */
.footer-section {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 11;
  flex-shrink: 0;
  text-align: left;
  font-size: 13px;
  color: var(--color-gray-300);
  font-family: var(--font-pretendard);
}

.footer-section p {
  font-size: 18px;
}

/* 푸터 상단 이미지 배너 */
.footer-banner {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  background-image: url('./images/Frame@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

/* 푸터 배너 구분선 */
.footer-banner-divider {
  height: var(--height-1);
  flex: 1;
  position: relative;
  border-top: 1px solid var(--color-gray-300);
  box-sizing: border-box;
}

/* 푸터 하단 다크 배경 영역 */
.footer-content-area {
  align-self: stretch;
  background-color: var(--color-darkslategray);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 48px var(--padding-0) 51px;
  gap: 39.5px;
}

/* 이벤트 유의사항 박스 */
.event-notice-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  flex-shrink: 0;
}

/* 이벤트 유의사항 텍스트 */
.event-notice-text {
  flex: 1;
  position: relative;
  line-height: var(--lh-24);
  display: inline-block;
  max-width: 752px;
  flex-shrink: 0;
}

.event-notice-text p {
  margin: 0;
}

/* 유의사항 리스트 */
.event-notice-list {
  margin: 0 auto;
  font-size: inherit;
  padding-left: 17px;
}

/* 푸터 구분선 */
.footer-divider {
  width: 100%;
  align-self: stretch;
  height: var(--height-1);
  position: relative;
  border-top: 1px solid var(--color-gray-300);
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 푸터 하단 정보 행 */
.footer-info-row {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-30);
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-15);
  color: var(--color-gray-400);
  font-family: var(--font-pretendard);
}

/* 푸터 정보 내부 레이아웃 */
.footer-info-inner {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px 0px;
  max-width: 1199px;
  flex-shrink: 0;
}

/* 회사 주소 및 연락처 텍스트 */
.footer-company-info {
  flex: 1;
  position: relative;
  letter-spacing: -0.01px;
  line-height: var(--lh-24);
  display: inline-block;
  min-width: 310px;
  max-width: 710px;
  flex-shrink: 0;
}

/* Cookie Notice / Privacy 링크 */
.footer-policy-links {
  width: 190px;
  position: relative;
  line-height: var(--lh-24);
  display: flex;
  column-gap: 10px;
  flex-shrink: 0;
}

/* 정책 링크 구분자 */
.policy-link-divider {
  color: var(--color-gray-200);
}

@media screen and (max-width: 640px) {
  .pc-block {display: none;}
  .m-block {display: block;}
  picture {
    display: flex;
    width: 100%;
  }
  .site-header {
    display: block;
    text-align: center;
    height: 91px;
    font-size: 12px;
    padding: 18px 20px 16px;
  }
  .galderma-logo {
    width: 111px;
    height: 20px;
  }
  .header-nav {
    position: relative;
    right: auto;
    top: auto;
    margin: 20px auto 0;
  }
  .hero-section .section-inner {
    position: absolute;
    left: 50%; 
    top: 0;
    z-index: 9;
    transform: translateX(-50%);
    padding: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px;
  }
  .hero-txt {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  .event-title {
    display: block;
    width: fit-content;
    font-size: 30px;
    text-align: center;
    margin: 0 auto 12px;
  }
  .event-subtitle {
    display: block;
    font-size: 16px;
    text-align: center;
    margin: 0 auto !important;
  }
  .galderma-intro-card {
    background: #FFDEEF0D;
    width: 100%;
    max-width: 80%;
    font-size: 16px;
    text-align: center;
    padding: 20px 11px;
    position: absolute;
    margin: 0 !important;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .card-logo-wrapper {
    margin: 0 auto;
  }
  .sculptra-logo {
    width: 147px;
    height: 75px;
  }

  .sculptra-section .section-inner {
    width: 100%;
    padding: 40px 20px 0;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .sculptra-section .banner-image {
    margin-top: 60px;
  }

  .restylane-section {
    padding: 56px 20px 68px;
  }
  .restylane-content-column {
    gap: 0;
  }
  .restylane-description-wrapper {
    padding: 0;

  }
  .restylane-inner-layout {
    max-width: 100%;
    flex-direction: column;
    row-gap: 28px;
    text-align: center;
  }
  .restylane-logo {
    width: 158px;
    height: 55px;
    margin: 0 auto;
  }
  .sculptra-slogan-title {
    font-size: 22px;
    line-height: 1.3;
    text-align: center;
    margin: 28px auto 14px; 
    padding: 0
  }
  .restylane-brand-title {
    font-size: 22px;
    line-height: 1.3;
    text-align: center;
    margin: 32px auto 14px; 
    padding: 0
  }
  .sculptra-description,
  .restylane-description-text,
  .sculptra-desc-line {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto; 
    padding: 0;
  }
  .sculptra-desc-line:last-of-type {
    margin-top: 10px;
  }
  .sculptra-cta-button,
  .restylane-cta-button {
    font-size: 14px;
    line-height: 1;
    margin: 24px auto 0 !important;
    max-width: 260px;
    width: 100%;
    padding: 16px 0;
  }
  .restylane-product-image {
    max-width: 100%;
    min-width: auto;
    width: 100%;
  }

  .footer-content-area {
    row-gap: 20px;
    padding: 30px 0;
  }
  .event-notice-box {
    max-width: 100%;
    padding: 0;
  }

  .footer-section p {
    font-size: 14px;
  }

  .event-notice-text {
    max-width: 100%;
    width: 100%;
    word-break: keep-all;
    font-size: 12px;
    line-height: 1.8;
    padding: 0 20px;
  }
  .footer-info-row {
    padding: 0 20px;
    font-size: 10px;
    line-height: 1.7;
  }
  .footer-company-info {
    font-size: 10px;
    line-height: 1.7;

  }
}