/* ============================================================
   Hero tagline + 메인/서브 타이포그래피 모던 그림자
   Hero 메인 헤딩 (CUSTOMIZING CARE) 위 eyebrow + 다층 셰도 폴리시.
   ============================================================ */

/* ── Tagline (eyebrow) ───────────────────────────────────── */

.section_main.section1 .ment .in .hero-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 30px !important;
  padding: 0;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  /* 다층 그림자 — 어떤 BG 에서도 깊이 + 가독성 */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 2px 12px rgba(0, 0, 0, 0.30);
  /* 페이드인 진입 */
  opacity: 0;
  transform: translateY(-6px);
  animation: hero-tagline-in 0.7s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.section_main.section1 .ment .in .hero-tagline__line {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.section_main.section1 .ment .in .hero-tagline__text {
  display: inline-block;
}

@keyframes hero-tagline-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 메인 헤딩 "CUSTOMIZING CARE" 모던 다층 셰도 ─────────── */

.section_main.section1 .ment .txt1 {
  /* 부드러운 부유감(float) + 깊이감 — 3-layer stacked shadow */
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.12),    /* 윗 highlight 살짝 — letterpress 느낌 */
    0 3px 8px rgba(58, 40, 28, 0.32),         /* 가까운 어두운 shadow */
    0 14px 36px rgba(58, 40, 28, 0.22),       /* 중거리 spread */
    0 28px 64px rgba(0, 0, 0, 0.10) !important;  /* 먼 ambient */
}

/* ── 한국어 서브 텍스트 다층 셰도 + 자간 ────────────────── */

.section_main.section1 .ment .txt2 {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.32),
    0 4px 16px rgba(58, 40, 28, 0.24) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.75 !important;
}

/* ── 모바일 — 비례 축소 ──────────────────────────────────── */

@media (max-width: 1200px) {
  /* 모바일 명시적 가운데 정렬 + 폭 보장 */
  .section_main.section1 .slider_banner.mobile .ment {
    text-align: center !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  .section_main.section1 .slider_banner.mobile .ment .in {
    text-align: center !important;
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto !important;
  }
  .section_main.section1 .ment .in .hero-tagline {
    font-size: 11px;
    letter-spacing: 0.16em;
    gap: 10px;
    margin-bottom: 22px !important;
    justify-content: center !important;
    /* 모바일에서 긴 EN 카피 줄바꿈 허용 (데스크톱은 nowrap 유지) */
    white-space: normal !important;
    flex-wrap: wrap;
    max-width: 92vw;
  }
  .section_main.section1 .ment .in .hero-tagline__text {
    /* 텍스트 자체는 단어 단위로 wrap */
    word-break: keep-all;
  }
  .section_main.section1 .ment .in .hero-tagline__line {
    width: 22px;
  }

  /* 모바일 메인 헤딩 셰도 살짝 축소 */
  .section_main.section1 .ment .txt1 {
    text-shadow:
      0 1px 1px rgba(255, 255, 255, 0.10),
      0 2px 6px rgba(58, 40, 28, 0.34),
      0 10px 24px rgba(58, 40, 28, 0.20) !important;
  }

  .section_main.section1 .ment .txt2 {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.32),
      0 3px 10px rgba(58, 40, 28, 0.20) !important;
  }
}

/* 매우 좁은 모바일 (≤360px) — 라인 숨김 */
@media (max-width: 360px) {
  .section_main.section1 .ment .in .hero-tagline__line {
    display: none;
  }
  .section_main.section1 .ment .in .hero-tagline {
    gap: 0;
  }
}

/* ============================================================
   Hero fit display — 모든 뷰포트에서 100vh + 이미지 cover
   ============================================================ */

.section_main.section1 {
  height: 100vh !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 데스크톱 bxSlider */
.section_main.section1 .slider_banner.pc,
.section_main.section1 .slider_banner.pc .bx-wrapper,
.section_main.section1 .slider_banner.pc .bx-viewport,
.section_main.section1 .slider_banner.pc .slider_banner_top,
.section_main.section1 .slider_banner.pc .slider_banner_top > li,
.section_main.section1 .slider_banner.pc .slider_banner_top > li .img {
  height: 100vh !important;
  width: 100% !important;
}

.section_main.section1 .slider_banner.pc .slider_banner_top > li .img img {
  width: 100% !important;
  height: 100vh !important;
  object-fit: cover;
  display: block;
}

/* 모바일 — header-polish.css 의 hero 복구와 충돌하지 않게 height:100vh override */
@media (max-width: 1200px) {
  .section_main.section1 .slider_banner.mobile,
  .section_main.section1 .slider_banner.mobile .bx-wrapper,
  .section_main.section1 .slider_banner.mobile .bx-viewport,
  .section_main.section1 .slider_banner.mobile .slider_banner_top2,
  .section_main.section1 .slider_banner.mobile .slider_banner_top2 > li:not(.bx-clone),
  .section_main.section1 .slider_banner.mobile .slider_banner_top2 > li:not(.bx-clone) .img {
    height: 100vh !important;
  }
  .section_main.section1 .slider_banner.mobile .slider_banner_top2 > li:not(.bx-clone) .img img {
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover;
  }
}