/* ============================================================
   VERIDIAN CODE — CODE 001 Serum & Oil (Single-Product Landing)
   v2 — 폰트 ↓ · 행간 1.4 · stroke 0건 · hero 풀블리드
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  --ld-bg:        #ffffff;
  --ld-bg-dark:   #0A0A0A;
  --ld-fg:        #0A0A0A;
  --ld-fg-mute:   #4A4A4A;
  --ld-fg-faint:  #8A8A8A;
  --ld-on-dark:   #ffffff;
  --ld-on-dark-2: rgba(255,255,255,0.72);
  --ld-on-dark-3: rgba(255,255,255,0.48);   /* em 강조용 */
  --ld-accent:    #2D5F3F;
  --ld-line:      rgba(0,0,0,0.10);

  --ld-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

body { font-family: var(--ld-font); }
.ld-on,
.ld-on * { font-family: var(--ld-font); }

.ld-on {
  color: var(--ld-fg);
  background: var(--ld-bg);
  font-feature-settings: "ss03", "ss06";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.012em;
}

/* ───── 섹션 / 컨테이너 ───── */
.ld-section { position: relative; width: 100%; padding: 180px 0; }
.ld-section--tight { padding: 120px 0; }
.ld-section--flush { padding: 0; }
.ld-section--dark { background: var(--ld-bg-dark); color: var(--ld-on-dark); }

.ld-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 64px; }
.ld-container--wide { max-width: 1640px; padding: 0 48px; }
.ld-container--narrow { max-width: 980px; padding: 0 32px; }

/* ───── 타이포 ───── */
.ld-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ld-fg);
  margin-bottom: 28px;
}
.ld-section--dark .ld-eyebrow { color: var(--ld-on-dark-2); }

.ld-h1 {
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
  word-break: keep-all;
}
.ld-h2 {
  font-size: clamp(34px, 4.5vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  word-break: keep-all;
}
.ld-h3 {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  word-break: keep-all;
}

/* ─── 본문 (약간 더 크게 + 행간 1.4) ─── */
.ld-lead {
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.4;
  color: var(--ld-fg-mute);
  margin: 28px 0 0;
  font-weight: 500;
  word-break: keep-all;
}
.ld-section--dark .ld-lead { color: var(--ld-on-dark-2); }

.ld-caption { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ld-fg-faint); }

/* ───── 버튼 ───── */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 40px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border-radius: 0;
  white-space: nowrap;
}
.ld-btn--dark { background: var(--ld-fg); color: #fff; border: 1px solid var(--ld-fg); }
.ld-btn--dark:hover { background: transparent; color: var(--ld-fg); }
.ld-btn--light { background: #fff; color: var(--ld-fg); border: 1px solid #fff; }
.ld-btn--light:hover { background: transparent; color: #fff; }
.ld-btn--outline-dark { background: transparent; color: var(--ld-fg); border: 1px solid var(--ld-fg); }
.ld-btn--outline-dark:hover { background: var(--ld-fg); color: #fff; }
.ld-btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.ld-btn--outline-light:hover { background: #fff; color: var(--ld-fg); border-color: #fff; }


/* ============================================================
   § 1 HERO  — 풀블리드 모델 이미지 배경 + 텍스트 오버레이
   ============================================================ */
.ld-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  color: #fff;
  background: #000;
  overflow: hidden;
}
.ld-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('../../images/image_hero_model.jpg') center/cover no-repeat;
}
.ld-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.45) 88%, rgba(0,0,0,0.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.0) 55%);
}
.ld-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 0 120px;
}
.ld-hero__inner { max-width: 880px; }
.ld-hero__brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
  text-transform: uppercase;
}
.ld-hero__title {
  font-size: clamp(44px, 7vw, 116px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: #fff;
  word-break: keep-all;
}
.ld-hero__title span { display: block; }
.ld-hero__lead {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  margin: 0 0 32px;
  max-width: 620px;
  word-break: keep-all;
}
.ld-hero__product {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ld-hero__product::before {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  background: #fff;
}
.ld-hero__spec {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  margin: 0 0 40px;
  line-height: 1.4;
}
.ld-hero__spec strong { font-weight: 700; letter-spacing: -0.005em; }
.ld-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* 헤로 우측 하단 작은 라벨 (제품 단독 강조) */
.ld-hero__corner {
  position: absolute;
  right: 64px;
  bottom: 120px;
  z-index: 3;
  text-align: right;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  font-weight: 600;
}
.ld-hero__corner strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-top: 6px;
  letter-spacing: 0.22em;
}


/* ============================================================
   § 2 SINGLE PRODUCT STATEMENT
   ============================================================ */
.ld-statement { text-align: center; background: var(--ld-bg); }
.ld-statement__num {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.4em; color: var(--ld-fg-faint);
  margin-bottom: 56px;
}
.ld-statement__num span { color: var(--ld-fg); }
.ld-statement__big {
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 auto 48px;
  max-width: 1180px;
  color: var(--ld-fg);
}
.ld-statement__big em { font-style: normal; color: var(--ld-fg-mute); }
.ld-statement__sub {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  color: var(--ld-fg-mute);
  line-height: 1.4;
  max-width: 720px;
  margin: 0 auto;
}
.ld-statement__image {
  margin-top: 100px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.ld-statement__image img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================
   § 3 WHY THIRST?  — 검정 / 텍스트만 (stroke 제거)
   ============================================================ */
.ld-why-dark { background: var(--ld-bg-dark); color: #fff; text-align: center; }
.ld-why-dark__title {
  font-size: clamp(36px, 5vw, 80px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin: 0 auto 72px;
  max-width: 1100px;
  color: #fff;
}
.ld-why-dark__title em {
  font-style: normal;
  color: var(--ld-on-dark-3);   /* 흰색 stroke 대신 흰색 반투명 */
}
.ld-why-dark__rows { max-width: 900px; margin: 72px auto 0; }
.ld-why-dark__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: left;
  align-items: baseline;
}
.ld-why-dark__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.ld-why-dark__row-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ld-on-dark-2);
  line-height: 1.4;
}
.ld-why-dark__row-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 36px;
}
.ld-why-dark__row-items li {
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}


/* ============================================================
   § 4 STD TECHNOLOGY
   ============================================================ */
.ld-std { background: var(--ld-bg); text-align: center; }
.ld-std__head { max-width: 1000px; margin: 0 auto 88px; }
.ld-std__head .ld-h1 { line-height: 1.05; }
.ld-std__svg-wrap { max-width: 1200px; margin: 0 auto 88px; }
.ld-std__svg { width: 100%; height: auto; max-height: 520px; }
/* 이미지 버전 — 반응형 분기
   PC/태블릿(>720px): image_std_skinsurface.png (21:9 와이드) → 가로 100% 채움, 잘림 없음
   모바일(≤720px):    image_skinsurface.png (포트레이트) → 세로형 표시 */
.ld-std__picture {
  display: block;
  width: 100%;
}
.ld-std__img {
  width: 100%;
  height: auto;
  max-width: 100%;        /* 컨테이너(1200px) 가로 가득 */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* 모바일에선 포트레이트 이미지. width:100%로 컨테이너 폭에 맞춰서
   양쪽 마진을 컨테이너 padding으로 항상 동일하게 보장 (좌우 균등).
   max-width: 480px로 큰 모바일/태블릿(700px대)에선 너무 커지지 않게 캡. */
@media (max-width: 720px) {
  .ld-std__svg-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .ld-std__picture {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
  }
  .ld-std__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
  }
}
.ld-std__legend {
  display: flex; justify-content: center;
  gap: 60px; flex-wrap: wrap;
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.4;
}
.ld-std__legend-item { display: flex; align-items: center; gap: 14px; }
.ld-std__legend-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.ld-std__legend-dot--blue  { background: radial-gradient(circle at 35% 30%, #B7E2F0, #2486AB); }
.ld-std__legend-dot--green { background: radial-gradient(circle at 35% 30%, #C5DC9B, #6BAA3F); }
.ld-std__legend-name { font-weight: 700; color: var(--ld-fg); }
.ld-std__legend-role { font-weight: 500; color: var(--ld-fg-mute); margin-left: 8px; }

.ld-std__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--ld-line);
}
.ld-std__benefit { text-align: left; padding: 56px 36px; }
.ld-std__benefit + .ld-std__benefit { border-left: 1px solid var(--ld-line); }
.ld-std__benefit-num {
  font-size: 13px; font-weight: 700;
  color: var(--ld-fg-faint);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.ld-std__benefit-title {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.ld-std__benefit-desc {
  font-size: 17px;
  font-weight: 500;
  color: var(--ld-fg-mute);
  line-height: 1.4;
  margin: 0;
}


/* ============================================================
   § 5 BENEFITS (해시태그 비주얼)
   ============================================================ */
.ld-bf { background: var(--ld-bg-dark); color: #fff; padding: 0; overflow: hidden; }
.ld-bf__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 100vh; }
.ld-bf__media {
  background: #000;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.ld-bf__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-bf__copy {
  padding: 100px 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.ld-bf__title {
  font-size: clamp(34px, 4vw, 68px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 48px;
  word-break: keep-all;
  color: #fff;
}
.ld-bf__title em { font-style: normal; color: var(--ld-on-dark-3); }   /* stroke 제거 */
.ld-bf__list { list-style: none; margin: 0; padding: 0; }
.ld-bf__list li {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: baseline; gap: 24px;
}
.ld-bf__list li:first-child { border-top: 1px solid rgba(255,255,255,0.14); }
.ld-bf__list-num {
  font-size: 13px; font-weight: 700;
  color: var(--ld-on-dark-2);
  letter-spacing: 0.12em;
  min-width: 32px;
}


/* ============================================================
   § 6 KEY INGREDIENTS
   ============================================================ */
.ld-ing { background: var(--ld-bg); padding: 0; }
.ld-ing__head { padding: 180px 0 110px; text-align: center; }
.ld-ing__head .ld-h1 { max-width: 1200px; margin: 0 auto; }

.ld-ing__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 78vh; }
.ld-ing__row + .ld-ing__row { border-top: 1px solid var(--ld-line); }
.ld-ing__row--reverse { direction: rtl; }
.ld-ing__row--reverse > * { direction: ltr; }

.ld-ing__copy { padding: 96px 80px; }
.ld-ing__ppm {
  font-size: clamp(64px, 9vw, 144px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
}
.ld-ing__ppm-unit {
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: -0.02em;
  vertical-align: top;
  margin-left: 8px;
  color: var(--ld-fg-mute);
}
.ld-ing__name {
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.ld-ing__name-en {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ld-fg-faint);
  margin-bottom: 28px;
  line-height: 1.4;
}
.ld-ing__desc {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.4;
  color: var(--ld-fg-mute);
  font-weight: 500;
  max-width: 520px;
  margin: 0;
}
.ld-ing__points {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-wrap: wrap;
  gap: 8px 24px;
  max-width: 520px;
}
.ld-ing__points li {
  font-size: 15px; font-weight: 600;
  color: var(--ld-fg);
  position: relative; padding-left: 14px;
  line-height: 1.4;
}
.ld-ing__points li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--ld-fg); border-radius: 50%;
}
.ld-ing__media { height: 100%; width: 100%; background: #F4F4F4; overflow: hidden; }
.ld-ing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================
   § 7 USAGE
   ============================================================ */
.ld-use { background: var(--ld-bg); padding: 0; }
.ld-use__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 96vh; }
.ld-use__media { background: #000; overflow: hidden; }
.ld-use__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-use__copy { padding: 130px 80px; display: flex; flex-direction: column; justify-content: center; }
.ld-use__steps { margin-top: 44px; }
.ld-use__step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-top: 1px solid var(--ld-line);
}
.ld-use__step:last-child { border-bottom: 1px solid var(--ld-line); }
.ld-use__step-num {
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ld-fg);
}
.ld-use__step h4 {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ld-use__step p {
  font-size: 17px;
  color: var(--ld-fg-mute);
  margin: 0;
  line-height: 1.4;
  font-weight: 500;
}


/* ============================================================
   § 8 TRUST  (stroke 제거)
   ============================================================ */
.ld-trust { background: var(--ld-bg-dark); color: #fff; text-align: center; }
.ld-trust__head { max-width: 900px; margin: 0 auto 88px; }
.ld-trust__title {
  font-size: clamp(36px, 5vw, 80px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin: 0;
  color: #fff;
}
.ld-trust__title em { font-style: normal; color: var(--ld-on-dark-3); }   /* stroke 제거 */
.ld-trust__list { max-width: 1100px; margin: 0 auto; }
.ld-trust__item {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 40px;
  align-items: baseline;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: left;
}
.ld-trust__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.ld-trust__num {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ld-on-dark-2);
  line-height: 1.4;
}
.ld-trust__name {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ld-trust__desc {
  font-size: 17px;
  font-weight: 500;
  color: var(--ld-on-dark-2);
  line-height: 1.4;
}


/* ============================================================
   § 9 BRAND
   ============================================================ */
.ld-brand-s { background: var(--ld-bg); text-align: center; }
.ld-brand-s .ld-container { max-width: 1080px; }
.ld-brand-s__big {
  font-size: clamp(28px, 3.8vw, 60px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
}
.ld-brand-s__desc {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.4;
  color: var(--ld-fg-mute);
  font-weight: 500;
  margin: 0 auto 48px;
  max-width: 760px;
}


/* ============================================================
   § 10 FAQ
   ============================================================ */
.ld-faq { background: var(--ld-bg); }
.ld-faq__head { max-width: 900px; margin: 0 auto 72px; text-align: center; }
.ld-faq__list { max-width: 1080px; margin: 0 auto; }
.ld-faq__item { border-top: 1px solid var(--ld-line); }
.ld-faq__item:last-child { border-bottom: 1px solid var(--ld-line); }
.ld-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 32px 56px 32px 0;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.4;
  position: relative;
  color: var(--ld-fg);
}
.ld-faq__item summary::-webkit-details-marker { display: none; }
.ld-faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 18px; height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
  transition: transform 0.2s ease;
}
.ld-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ld-faq__item-body {
  padding: 0 80px 32px 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ld-fg-mute);
  font-weight: 500;
  max-width: 800px;
}


/* ============================================================
   § 11 CTA
   ============================================================ */
.ld-cta { background: var(--ld-bg); text-align: center; }
.ld-cta__title {
  font-size: clamp(36px, 5vw, 80px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 44px;
}
.ld-cta__sub {
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--ld-fg-mute);
  font-weight: 500;
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto 48px;
}
.ld-cta__buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }


/* ============================================================
   반응형 — PC(≥1101px)는 위 규칙 그대로.
   1100 / 720 / 480 세 단계로 단계적 모바일 최적화.
   ============================================================ */

/* ─────── 태블릿·소형 노트북 (≤1100px) ─────── */
@media (max-width: 1100px) {
  .ld-section { padding: 120px 0; }
  .ld-container { padding: 0 32px; }

  /* Hero */
  .ld-hero__corner { right: 32px; bottom: 100px; }

  /* § 4 STD */
  .ld-std__head { margin-bottom: 64px; }
  .ld-std__svg-wrap { margin-bottom: 64px; }
  .ld-std__legend { gap: 32px; }
  .ld-std__benefits { grid-template-columns: 1fr; }
  .ld-std__benefit + .ld-std__benefit { border-left: none; border-top: 1px solid var(--ld-line); }

  /* § 5 Benefits — product-benefits.jpg(768×1376, 9:16)이 잘리지 않도록
     컨테이너 비율 제거 + 이미지를 자연 비율로 표시 */
  .ld-bf__grid { grid-template-columns: 1fr; min-height: auto; }
  .ld-bf__media {
    aspect-ratio: auto;
    height: auto;
    display: block;
  }
  .ld-bf__media img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
  }
  .ld-bf__copy { padding: 80px 32px; }

  /* § 6 Ingredients */
  .ld-ing__head { padding: 130px 0 80px; }
  .ld-ing__row { grid-template-columns: 1fr; min-height: auto; }
  .ld-ing__row--reverse { direction: ltr; }
  .ld-ing__copy { padding: 80px 32px; }
  .ld-ing__media { aspect-ratio: 4/5; }

  /* § 7 Usage */
  .ld-use__grid { grid-template-columns: 1fr; min-height: auto; }
  .ld-use__media { aspect-ratio: 4/5; }
  .ld-use__copy { padding: 80px 32px; }
}


/* ─────── 큰 폰·작은 태블릿 (≤720px) ─────── */
@media (max-width: 720px) {
  .ld-section { padding: 72px 0; }
  .ld-container { padding: 0 22px; }

  /* 공통 버튼 — 모바일 친화 사이즈 */
  .ld-btn { padding: 16px 28px; font-size: 15px; }

  /* Hero / CTA 영역의 버튼만 풀너비 적용 */
  .ld-hero__cta,
  .ld-cta__buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .ld-cta__buttons { align-items: center; }
  .ld-hero__cta .ld-btn,
  .ld-cta__buttons .ld-btn { width: 100%; max-width: 360px; }

  /* § 1 Hero */
  .ld-hero__content { padding: 0 0 72px; }
  .ld-hero__inner { max-width: 100%; }
  .ld-hero__brand { font-size: 12px; letter-spacing: 0.24em; margin: 0 0 22px; }
  .ld-hero__title { margin: 0 0 22px; }
  .ld-hero__lead { margin: 0 0 26px; }
  .ld-hero__product { font-size: 12px; letter-spacing: 0.18em; gap: 12px; margin: 0 0 12px; }
  .ld-hero__product::before { width: 28px; }
  .ld-hero__spec { margin: 0 0 32px; }
  .ld-hero__corner { display: none; }

  /* § 2 Statement */
  .ld-statement__num { margin-bottom: 36px; letter-spacing: 0.32em; }
  .ld-statement__big { margin-bottom: 28px; }
  .ld-statement__image { margin-top: 56px; aspect-ratio: 3 / 4; }   /* 세로 컷 느낌 */

  /* § 3 Why dark */
  .ld-why-dark__title { margin-bottom: 48px; }
  .ld-why-dark__rows { margin-top: 48px; }
  .ld-why-dark__row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 0;
  }
  .ld-why-dark__row-label { font-size: 12px; letter-spacing: 0.18em; }
  .ld-why-dark__row-items { gap: 12px 22px; }

  /* § 4 STD */
  .ld-std__head { margin-bottom: 48px; }
  .ld-std__svg-wrap { margin-bottom: 48px; }
  .ld-std__svg { max-height: 320px; }
  /* 모바일에서 2개 legend-item이 세로로 쌓일 때 둘이 동일한 X 위치에서 시작되도록
     column + flex-start. 전체 컬럼은 viewport 중앙 정렬 */
  .ld-std__legend {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    font-size: 14px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .ld-std__legend-dot { width: 12px; height: 12px; }
  .ld-std__legend-name { font-weight: 700; }
  .ld-std__legend-role { font-weight: 500; margin-left: 6px; }
  .ld-std__benefit { padding: 36px 22px; }
  .ld-std__benefit-num { margin-bottom: 14px; }
  .ld-std__benefit-title { margin: 0 0 12px; }
  .ld-std__benefit-desc { font-size: 16px; }

  /* § 5 Benefits */
  .ld-bf__copy { padding: 60px 22px; }
  .ld-bf__title { margin: 0 0 32px; }
  .ld-bf__list li { padding: 18px 0; gap: 18px; }
  .ld-bf__list-num { min-width: 28px; font-size: 12px; }

  /* § 6 Ingredients — 모바일 상하 여백 확장 (Hemp/Panthenol 두 섹션 호흡감) */
  .ld-ing__head { padding: 96px 0 56px; }
  .ld-ing__copy { padding: 88px 22px; }       /* 60→88 (상하 확장) */
  .ld-ing__row + .ld-ing__row { margin-top: 0; }
  .ld-ing__ppm { margin: 0 0 22px; letter-spacing: -0.04em; }
  .ld-ing__ppm-unit { font-size: 0.45em; margin-left: 6px; }
  .ld-ing__name { margin: 0 0 10px; }
  .ld-ing__name-en {
    margin-bottom: 28px;
    line-height: 1.55;                         /* Panthenol 2줄 가독성 */
  }
  .ld-ing__desc { margin-top: 4px; }
  .ld-ing__points { margin: 32px 0 0; gap: 8px 18px; }
  .ld-ing__points li { font-size: 14px; padding-left: 12px; }

  /* § 7 Usage */
  .ld-use__copy { padding: 60px 22px; }
  .ld-use__steps { margin-top: 32px; }
  .ld-use__step {
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 22px 0;
  }
  .ld-use__step h4 { margin: 0 0 6px; }
  .ld-use__step p { font-size: 16px; }

  /* § 8 Trust */
  .ld-trust__head { margin-bottom: 56px; }
  .ld-trust__item {
    grid-template-columns: 56px 1fr;
    gap: 18px 22px;
    padding: 30px 0;
  }
  .ld-trust__num { font-size: 12px; }
  .ld-trust__desc {
    grid-column: 1 / -1;
    padding-left: 0;
    font-size: 16px;
  }
  .ld-trust__name { font-size: clamp(20px, 5.2vw, 26px); }

  /* § 9 Brand */
  .ld-brand-s__big { margin: 0 0 32px; }
  .ld-brand-s__desc { margin: 0 auto 32px; }

  /* § 10 FAQ */
  .ld-faq__head { margin-bottom: 48px; }
  .ld-faq__item summary {
    padding: 22px 40px 22px 0;
    font-size: 17px;
  }
  .ld-faq__item summary::after { width: 14px; height: 14px; right: 4px; }
  .ld-faq__item-body { padding: 0 0 24px; font-size: 16px; }

  /* § 11 CTA */
  .ld-cta__title { margin: 0 0 28px; }
  .ld-cta__sub { margin: 0 auto 32px; }
}


/* ─────── 일반 모바일 (≤480px) ─────── */
@media (max-width: 480px) {
  .ld-section { padding: 56px 0; }
  .ld-container { padding: 0 18px; }

  /* § 1 Hero — 더 컴팩트 */
  .ld-hero__content { padding: 0 0 56px; }
  .ld-hero__title { font-size: clamp(34px, 9.2vw, 56px); line-height: 1.08; margin: 0 0 18px; }
  .ld-hero__lead { font-size: 16px; margin: 0 0 22px; }
  .ld-hero__spec { font-size: 15px; margin: 0 0 26px; }

  /* § 2 Statement */
  .ld-statement__big { font-size: clamp(30px, 7.6vw, 44px); letter-spacing: -0.03em; }
  .ld-statement__sub { font-size: 16px; }
  .ld-statement__image { margin-top: 40px; }

  /* § 3 Why dark */
  .ld-why-dark__title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 36px; }
  .ld-why-dark__rows { margin-top: 36px; }
  .ld-why-dark__row { padding: 22px 0; }
  .ld-why-dark__row-items li { font-size: 18px; }

  /* § 4 STD */
  .ld-std__svg { max-height: 240px; }
  .ld-std__legend { gap: 12px; font-size: 13px; }
  .ld-std__benefit { padding: 30px 18px; }
  .ld-std__benefit-title { font-size: 20px; }
  .ld-std__benefit-desc { font-size: 15px; }

  /* § 5 Benefits */
  .ld-bf__copy { padding: 56px 18px; }
  .ld-bf__title { font-size: clamp(26px, 7.2vw, 36px); margin: 0 0 26px; }
  .ld-bf__list li { font-size: 18px; padding: 16px 0; gap: 14px; }

  /* § 6 Ingredients */
  .ld-ing__head { padding: 72px 0 40px; }
  .ld-ing__copy { padding: 72px 18px; }       /* 50→72 (상하 확장) */
  .ld-ing__ppm { font-size: clamp(56px, 16vw, 84px); margin: 0 0 14px; }
  .ld-ing__name { font-size: 22px; }
  .ld-ing__desc { font-size: 16px; }

  /* § 7 Usage */
  .ld-use__copy { padding: 50px 18px; }
  .ld-use__step { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; }
  .ld-use__step-num { font-size: 32px; }
  .ld-use__step h4 { font-size: 18px; }
  .ld-use__step p { font-size: 15px; }

  /* § 8 Trust */
  .ld-trust__title { font-size: clamp(26px, 7.6vw, 38px); }
  .ld-trust__head { margin-bottom: 40px; }
  .ld-trust__item { grid-template-columns: 44px 1fr; padding: 24px 0; }
  .ld-trust__name { font-size: 19px; }
  .ld-trust__desc { font-size: 15px; }

  /* § 9 Brand */
  .ld-brand-s__big { font-size: clamp(22px, 6.4vw, 30px); }
  .ld-brand-s__desc { font-size: 16px; }

  /* § 10 FAQ */
  .ld-faq__item summary { font-size: 16px; padding: 20px 32px 20px 0; }
  .ld-faq__item-body { font-size: 15px; padding: 0 0 20px; }

  /* § 11 CTA */
  .ld-cta__title { font-size: clamp(28px, 7.8vw, 40px); margin: 0 0 22px; }
  .ld-cta__sub { font-size: 16px; margin: 0 auto 28px; }

  /* 공통 버튼 — 더 압축 */
  .ld-btn { padding: 14px 22px; font-size: 14px; }
}


/* ============================================================
   § Scroll Reveal & Load Interactions
   JS가 .ld-reveal 클래스를 자동 부여하고, 뷰포트 진입 시
   .is-visible을 토글한다. CSS는 transition만 담당.
   ============================================================ */
.js-enabled .ld-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js-enabled .ld-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 자식 순차 등장 (stagger) ─── */
.js-enabled .ld-reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js-enabled .ld-reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.js-enabled .ld-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.js-enabled .ld-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.js-enabled .ld-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.js-enabled .ld-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.js-enabled .ld-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.js-enabled .ld-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* ─── HERO 초기 로드 시 (스크롤 무관, 위에서부터 차례로) ─── */
.js-enabled .ld-hero__inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-enabled.is-loaded .ld-hero__inner > * { opacity: 1; transform: translateY(0); }
.js-enabled.is-loaded .ld-hero__inner > *:nth-child(1) { transition-delay: 0.10s; }
.js-enabled.is-loaded .ld-hero__inner > *:nth-child(2) { transition-delay: 0.25s; }
.js-enabled.is-loaded .ld-hero__inner > *:nth-child(3) { transition-delay: 0.40s; }
.js-enabled.is-loaded .ld-hero__inner > *:nth-child(4) { transition-delay: 0.55s; }
.js-enabled.is-loaded .ld-hero__inner > *:nth-child(5) { transition-delay: 0.70s; }
.js-enabled.is-loaded .ld-hero__inner > *:nth-child(6) { transition-delay: 0.85s; }

/* ─── 이미지 줌-인 reveal (큰 비주얼 강조) ─── */
.js-enabled .ld-reveal-zoom { overflow: hidden; }
.js-enabled .ld-reveal-zoom img {
  transform: scale(1.08);
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.js-enabled .ld-reveal-zoom.is-visible img { transform: scale(1); opacity: 1; }

/* ─── 큰 ppm 숫자 카운트업 자리표시(현재 잠금) ─── */
.js-enabled .ld-ing__ppm.ld-reveal { transform: translateY(60px); }

/* ─── 접근성: reduce-motion 사용자 비활성 ─── */
@media (prefers-reduced-motion: reduce) {
  .js-enabled .ld-reveal,
  .js-enabled .ld-reveal-stagger > *,
  .js-enabled .ld-hero__inner > *,
  .js-enabled .ld-reveal-zoom img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ============================================================
   § 모바일 전용 보강 (≤720px)
   · 본문 줄바꿈은 모바일에서만 시각적으로 반영
   · 데스크탑은 한 줄로 자연스럽게 흐름
   ============================================================ */

/* 데스크탑에선 일부 paragraph의 <br>을 숨김 → 한 줄 흐름 (모바일에서만 줄바꿈)
   주의: .ld-hero__lead / .ld-statement__sub / .ld-ing__desc / .ld-brand-s__desc는
        vc-desktop-only / vc-mobile-only span 분기를 사용하므로 이 숨김 규칙 미포함.
        모바일 전용 줄바꿈은 .ld-mbr 클래스로 명시 */
@media (min-width: 721px) {
  .ld-hero__spec br,
  .ld-trust__desc br,
  .ld-mbr { display: none; }
}

@media (max-width: 720px) {
  /* HERO — 제품 스펙 라인(CODE 001 · SERUM & OIL · 30 ML) 숨김 */
  .ld-hero__product { display: none; }

  /* 모바일 줄바꿈 보정 — line-height/마진 미세조정으로 가독성 확보 */
  .ld-hero__lead { line-height: 1.5; }
  .ld-hero__spec { line-height: 1.55; }
  .ld-statement__sub { line-height: 1.55; }
  .ld-ing__desc { line-height: 1.55; }
  .ld-brand-s__desc { line-height: 1.55; }
  .ld-trust__desc { line-height: 1.55; margin-top: 6px; }

  /* § 2 STATEMENT — eyebrow "01 / ONE PRODUCT, ONE ANSWER" 한 줄 강제 */
  .ld-statement__num {
    font-size: 11px;
    letter-spacing: 0.16em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  /* § 8 TRUST — 숫자 숨김 + 중앙 정렬 */
  .ld-trust__num { display: none; }
  .ld-trust__item {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
    padding: 32px 0;
  }
  .ld-trust__name { text-align: center; }
  .ld-trust__desc {
    grid-column: 1 / -1;
    text-align: center;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .ld-statement__num {
    font-size: 10px;
    letter-spacing: 0.10em;
  }
}