/* ════════════════════════════════════════
   HERO — 히어로 섹션 / 워터마크 / 카드 오버랩
   ════════════════════════════════════════ */

/* ── HERO ── */
.hero {
  position: relative;
  height: 95vh; /* 하단 카드 오버랩에 가려지는 영상 영역을 줄이기 위해 상향 */
  min-height: 700px; /* 최소 높이를 확보하여 레이아웃 무너짐 방지 */
  display: grid;
  grid-template-columns: 38% 62%;
}

/* Left sidebar */
.hero-sidebar {
  position: relative;
  z-index: 30; /* .cards-overlap(z-index: 20)보다 높게 설정하여 인디케이터가 가려지지 않게 함 */
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center; /* 콘텐츠를 중앙으로 배치하여 여백을 채움 */
  padding: 100px 52px 240px 52px; /* 하단 여백을 늘려 스크롤 인디케이터와의 겹침 방지 */
  overflow: hidden; /* 워터마크가 영역 밖으로 나가는 것을 방지 */
}

@keyframes rotateWatermark {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%; /* 로고 사이즈를 130%에서 100%로 축소 조절 */
  opacity: 0.18; /* 아주 연하게 설정하여 그림자 같은 느낌 부여 */
  pointer-events: none; /* 텍스트 선택이나 클릭 방해 금지 */
  z-index: -1; /* 텍스트보다 뒤에 위치 */
  filter: blur(2px); /* 약간의 블러를 주어 더 은은하게 표현 */
  animation: rotateWatermark 20s linear infinite; /* 페이지 로드 시점부터 제자리에서 은은하게 20초 주기로 무한 회전 */
}

.scroll-indicator {
  position: absolute;
  bottom: 80px; left: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.scroll-indicator .scroll-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--text-sub);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.scroll-line {
  width: 2px; height: 110px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.7); }
}

.hero-title-block {
  width: max-content; /* 자식 요소 중 가장 긴 요소(영문 타이틀)에 너비를 맞춤 */
  max-width: 100%;    /* 모바일에서 화면 밖으로 나가는 것 방지 */
  margin-bottom: 28px;
}

.hero-title-ko {
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--brown-deep);
  margin-bottom: 8px;
}

.hero-title-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.12em;
}

.hero-divider {
  width: 100%; /* 부모(hero-title-block)의 전체 너비를 차지하게 함 */
  height: 1px;
  background: var(--gold);
  margin: 20px 0 0 0; /* 영문 타이틀과의 간격 조정 */
}

.hero-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.9;
  color: var(--text-sub);
  letter-spacing: 0.03em;
  margin-bottom: 36px;
}

.btn-link {
  display: none; /* PC에서는 카드가 항상 노출되므로 버튼 숨김 (모바일·태블릿은 responsive.css에서 노출) */
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1; /* 글자의 높이 기준선을 잡기 위해 추가 */
  letter-spacing: 0.15em;
  color: var(--brown-mid);
  text-decoration: none;
  transition: gap 0.2s;
}
.btn-link:hover { gap: 16px; color: var(--gold); }

/* 클릭 시 펼침 상태 — 플러스 아이콘을 엑스 형태로 회전 */
.btn-link.active .icon-plus {
  border-color: var(--gold);
  background: var(--gold);
  transform: rotate(45deg);
}
.btn-link.active .icon-plus::before,
.btn-link.active .icon-plus::after {
  background: var(--white);
}
.btn-link .icon-plus {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(139, 111, 71, 0.4);
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-top: 1px; /* 한글 폰트 베이스라인에 맞추어 아래로 1px 미세조정 */
}
.btn-link .icon-plus::before,
.btn-link .icon-plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold);
  transition: all 0.3s ease;
}
.btn-link .icon-plus::before { width: 8px; height: 1.5px; }
.btn-link .icon-plus::after { width: 1.5px; height: 8px; }

.btn-link:hover .icon-plus {
  border-color: var(--gold);
  background: var(--gold);
  transform: rotate(90deg);
}
.btn-link:hover .icon-plus::before,
.btn-link:hover .icon-plus::after {
  background: var(--white);
}

/* Right video area */
.hero-video-wrap {
  position: relative;
  overflow: hidden;
  container-type: size; /* iframe 커버 계산을 뷰포트가 아닌 이 박스 실제 크기 기준으로 하기 위함 */
}

.hero-video-wrap video,
.hero-video-wrap .video-placeholder,
.hero-video-wrap iframe {
  border: none;
}

.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqw;
  height: 56.25cqw; /* 16:9 ratio, 컨테이너(hero-video-wrap) 실제 크기 기준 */
  min-height: 100cqh;
  min-width: 177.78cqh; /* 16:9 ratio */
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 메인 히어로(index) — PC 영상은 4:3, 태블릿·모바일 영상은 16:9로 소스가 다르므로 커버 비율도 각각 맞춤 */
.hero:not(.hero-immersive) .hero-video-pc iframe {
  width: 100cqw;
  height: 75cqw; /* 4:3 ratio */
  min-height: 100cqh;
  min-width: 133.33cqh; /* 4:3 ratio */
}

.hero:not(.hero-immersive) .hero-video-mobile iframe {
  width: 100cqw;
  height: 56.66cqw; /* 16:9 ratio */
  min-height: 100cqh;
  min-width: 176.5cqh; /* 16:9 ratio */
}

/* 세로 영상 (9:16) — 높이 기준으로 맞춰 위아래 잘림 없이 표시 */
.hero-video-wrap.video-portrait iframe {
  width: 56.25cqh; /* 컨테이너 높이 × 9/16 */
  height: 100cqh;
  min-height: 100cqh;
  min-width: unset;
  aspect-ratio: unset;
}


.video-placeholder {
  background: linear-gradient(135deg, #3d3228 0%, #2a2018 40%, #1e1a14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Atmospheric overlay on video */
.hero-video-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(242,237,228,0.15) 0%,
    transparent 30%
  ),
  linear-gradient(
    to bottom,
    transparent 50%,
    rgba(30,22,14,0.45) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Headline over video */
.hero-video-text {
  position: absolute;
  top: 50%;
  right: 60px;
  transform: translateY(-55%);
  z-index: 2;
  text-align: right;
}

.hero-video-text h2 {
  font-family: 'Noto Serif KR', serif;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
  letter-spacing: 0.05em;
}

/* ── HERO IMMERSIVE (Concept 2) ── */
.hero-immersive {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-template-columns: 1fr; /* Override split layout */
  background: var(--brown-deep);
  height: 100vh; /* 화면 전체를 꽉 채우는 몰입형 높이 */
}

.hero-immersive.sub-hero {
  height: 75vh; /* 16:9 영상 상하 크롭을 줄이기 위해 60vh → 75vh로 상향 */
  min-height: 520px;
}

.hero-immersive .hero-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-overlay-dark {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* 어두운 오버레이로 텍스트 가독성 확보 */
  z-index: 1;
}

.hero-content-centered {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white);
}

.hero-content-centered .hero-title-ko,
.hero-content-centered .hero-sub {
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-content-centered .hero-title-en {
  color: var(--gold-light); /* 기존 gold보다 밝은 gold-light 사용 */
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-content-centered .btn-link {
  color: rgba(255, 255, 255, 0.9); /* 버튼 텍스트를 흰색 계열로 변경 */
}

.hero-content-centered .hero-divider {
  margin: 20px auto 0; /* 중앙 정렬 */
  background: var(--white);
}

/* ── TREATMENT CARDS OVERLAPPING HERO ── */
.cards-overlap {
  position: relative;
  margin-top: -230px; /* 히어로 섹션과의 겹침 정도를 조절 */
  z-index: 40; /* 사이드바(z-index: 30)보다 높게 설정하여 위로 띄움 */
  display: grid;
  grid-template-columns: 25% repeat(3, 1fr) 0.8fr; /* 38%에서 25%로 줄여 카드를 왼쪽으로 이동 */
  perspective: 1200px; /* 3D 효과를 위한 원근감 추가 */
  gap: 0;
  padding-left: 0;
}

/* Concept 2용 중앙 정렬 카드 그리드 */
.cards-centered {
  grid-template-columns: repeat(4, 1fr);
  padding: 100px 48px; /* 겹침을 제거했으므로 상하 여백을 충분히 확보 */
  margin-top: 0;      /* 히어로 섹션과 겹치지 않도록 설정 */
  padding: 0 48px 100px; /* 상단 패딩을 제거하고 하단 여백만 유지 */
  margin-top: -200px;   /* 다시 히어로 섹션 영상 하단에 겹치도록 설정 */
}

.cards-spacer { 
  background: transparent; /* 배경을 투명하게 하여 아래 hero-sidebar가 보이도록 수정 */
  pointer-events: none;    /* 스페이서 영역 아래의 링크나 버튼 클릭이 가능하도록 설정 */
}

.treatment-card {
  background: var(--white);
  border: 1px solid rgba(139,111,71,0.1);
  padding: 0 0 18px 0;
  border-radius: 12px; /* 카드 모서리를 부드럽게 라운딩 처리 */
  cursor: pointer;
  /* 더 부드러운 유기적 움직임을 위한 타이밍 함수 적용 */
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* 공중에 떠 있는 느낌을 주는 부드러운 기본 그림자 */
  box-shadow: 0 20px 40px rgba(44, 36, 24, 0.08);
  position: relative;
  transform-style: preserve-3d; /* 자식 요소들의 3D 효과 유지 */
  overflow: hidden;
}

/* 호버 시 더 높게 떠오르고 그림자가 넓게 퍼지는 효과 */
.treatment-card:hover { transform: translateY(-15px); box-shadow: 0 40px 80px rgba(44, 36, 24, 0.15); }

.treatment-card:nth-child(2) { margin-top: 0; }
.treatment-card:nth-child(3) { margin-top: 30px; }
.treatment-card:nth-child(4) { margin-top: 30px; }
.treatment-card:nth-child(5) { margin-top: 60px; }

.card-img {
  width: 100%;
  aspect-ratio: 12 / 5; /* 고정 높이 대신 비율로 지정하여 카드 폭이 바뀌어도 비율 유지 */
  height: auto;
  object-fit: cover; /* 이미지가 비율을 유지하며 영역을 꽉 채우도록 설정 */
  display: block;
  background: #eee; /* 이미지 로딩 전 배경색 */
  transition: transform 0.5s ease;
}

.card-body { padding: 14px 22px 0; }

.card-icon {
  width: 32px; height: 32px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.card-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px; /* 폰트 사이즈 소폭 조정 */
  font-weight: 700;
  color: var(--brown-deep);
  margin-bottom: 6px; /* 일관된 간격 적용 */
  letter-spacing: 0.03em;
}

.card-desc {
  font-size: 14px; /* 설명 텍스트 사이즈 소폭 조정 */
  line-height: 1.85;
  color: var(--text-sub);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border: 1.5px solid var(--gold);
  border-radius: 40px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.3s ease;
}
.card-more:hover {
  background: var(--gold);
  color: var(--white);
  gap: 14px;
}