/* ===========================================================================
   atelier-override.css
   Glowix 디자인 시스템 위에 아뜰리에치과 브랜드(LU 퍼플) 적용.
   원본 custom.css는 건드리지 않고 이 파일을 나중에 로드해서 덮어씀.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. 브랜드 컬러 + 폰트 토큰 재선언
   Glowix는 대부분의 값을 var(--...)로 참조하므로 루트만 덮으면 ~95% 커버됨.
   --------------------------------------------------------------------------- */
:root {
  /* ───── Palette (LU 퍼플 시스템) ───── */
  --primary-color:      #7A4EA1;            /* Glowix #481E0B 브라운 → 딥 퍼플 */
  --secondary-color:    #F3EFF8;            /* Glowix #FCF4F1 크림 → 페일 라일락 */
  --accent-color:       #BDA8CD;            /* Glowix #CD5F37 테라코타 → 라이트 라벤더 */
  --text-color:         #3C3C3C;            /* Glowix #69615D → 본문 (LU) */
  --white-color:        #FFFFFF;            /* 유지 */
  --divider-color:      #BDA8CD1A;          /* Glowix #CD5F371A → 라벤더 10% */
  --dark-divider-color: #FFFFFF1A;          /* 유지 */
  --error-color:        rgb(230, 87, 87);   /* 유지 */

  /* ───── Fonts ─────
     한글 Pretendard + 영문 세리프 Cormorant Garamond.
     원본 Sora/Marcellus는 fallback으로만 둠 (네트워크 지연 시 완충). */
  --default-font: 'Pretendard Variable', 'Pretendard', 'Sora', system-ui, sans-serif;
  --accent-font:  'Cormorant Garamond', 'Marcellus', serif;
}

/* ---------------------------------------------------------------------------
   2. 하드코딩된 브라운(#481E0B) 그라디언트 덮기
   custom.css의 카드/케이스 하단 fade 오버레이 2곳만 해당.
   --------------------------------------------------------------------------- */
.case-study-item::before,
.result-item::before,
.blog-item::before,
[class*="-item"]::before {
  /* 카드 하단에 브라운 그라디언트가 깔리던 자리를 딥 퍼플로 통일. */
}

/* 실제 규칙을 원본 셀렉터로 직접 덮음 (정확한 셀렉터는 custom.css 1480·1915 라인) */
.case-study-image::before,
.our-result .swiper-slide::before,
.result-image::before {
  background: linear-gradient(180deg, rgba(122, 78, 161, 0) 66%, #7A4EA1 100%) !important;
}

/* ---------------------------------------------------------------------------
   3. 히어로 그라디언트 타이틀 (LU식) — 필요 시 사용
   원본에는 없는 유틸. Blade에서 class로 붙이면 적용.
   --------------------------------------------------------------------------- */
.atelier-hero-title {
  background: linear-gradient(35deg, #7854AD 2%, #DBBDC4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   4. 한글 타이포 튜닝
   Cormorant Garamond는 한글 글리프가 없어서 한글이 섞이면 시스템 폰트로
   떨어짐. accent-font가 쓰인 자리에 한글이 오면 Pretendard로 fallback되도록
   강제.
   --------------------------------------------------------------------------- */
.section-title h2,
.section-title h3,
.hero-content h1,
.hero-content h2 {
  /* 영문·한글 혼합 시 글리프 폴백이 자연스럽게 일어남 */
  font-family: var(--accent-font), var(--default-font);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* 한글 본문은 Pretendard 기본 사용 (Sora 레터스페이싱이 한글에 어색) */
body,
p,
.section-title h3,
li,
a {
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   5. 히어로 보라색 오버레이 제거
   custom.css 824·865 라인의 ::before(--primary-color, opacity 60%)를 제거.
   --------------------------------------------------------------------------- */
.hero.hero-bg-image::before,
.hero.hero-bg-image.hero-slider-layout .hero-slide::before {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* 오버레이가 사라졌을 때 밝은 영역의 이미지에서도 흰 텍스트가 가독성을
   유지하도록 부드러운 그림자 추가. 원래 60% 보라 톤만큼은 안 깔리되
   글자 윤곽은 살린다. */
.hero-content .section-title h1,
.hero-content .section-title h2,
.hero-content .section-title h3,
.hero-content .section-title p,
.hero-content .video-play-button p {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------------
   6. 히어로 슬라이드 높이 통일 (100vh / min 700px)
   원본은 .hero-slide의 padding(200px 0)으로 높이가 결정돼 좁은 뷰포트나
   리사이즈 타이밍에 슬라이드별 차이가 생김. swiper 컨테이너 전체에 고정
   높이를 박아 슬라이드 1·2가 동일 높이가 되도록 강제.
   주의: 이 프로젝트는 .hero-section이 아니라 .hero 클래스를 사용함.
   --------------------------------------------------------------------------- */
.hero.hero-bg-image.hero-slider-layout,
.hero.hero-bg-image.hero-slider-layout .swiper,
.hero.hero-bg-image.hero-slider-layout .swiper-wrapper,
.hero.hero-bg-image.hero-slider-layout .swiper-slide,
.hero.hero-bg-image.hero-slider-layout .hero-slide {
  height: 100vh !important;
  min-height: 700px !important;
}

/* hero-slider-image는 absolute로 슬라이드를 꽉 채움 — 이미지 자체도 cover로 강제 */
.hero.hero-bg-image.hero-slider-layout .hero-slide .hero-slider-image,
.hero.hero-bg-image.hero-slider-layout .hero-slide .hero-slider-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 슬라이드 높이를 늘렸으니 텍스트 콘텐츠를 세로 중앙에 정렬 (원본은 padding으로
   배치돼서 100vh로 키우면 위쪽에 붙어버림) */
.hero.hero-bg-image.hero-slider-layout .hero-slide {
  display: flex;
  align-items: center;
  padding: 0 !important;
}
.hero.hero-bg-image.hero-slider-layout .hero-slide > .container {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   7. 헤더 로그인 버튼 호버 색상 (헤더 전용)
   Glowix 원본 .btn-default.btn-highlighted:hover는 bg→transparent + 글자→퍼플로
   변하는데, 헤더 배경이 흰색/밝은 색이라 글자만 둥둥 떠 보임.
   .header-contact-btn 스코프에 한정해서 호버시 딥 퍼플 + 흰 글자로 강제.
   히어로 버튼(.hero-btn 부모)은 영향 없음.
   --------------------------------------------------------------------------- */
.header-contact-btn .btn-default.btn-highlighted:hover {
  background: var(--primary-color) !important;  /* #7A4EA1 딥 퍼플 */
  color: var(--white-color) !important;
}

/* sweep ::after 애니메이션 비활성화 — 위 단색 호버와 충돌 방지 */
.header-contact-btn .btn-default.btn-highlighted:hover::after {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   8. 헤더 메뉴 디테일 (드롭다운 화살표 제거)
   custom.css:565 `.main-menu ul li.submenu > a:after { content: '\f107' }`로
   FontAwesome 다운 셰브론(▼)이 부모 메뉴 텍스트 우측에 붙음. 깔끔한 텍스트만
   노출하고 호버시 드롭다운이 펼쳐지는 패턴은 그대로 유지.
   --------------------------------------------------------------------------- */
.main-menu ul li.submenu > a::after {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* Tailwind utility `.collapse { visibility: collapse }`와 Bootstrap `.collapse`
   클래스가 navbar-collapse에서 동시에 매칭되어 메뉴 전체가 invisible이 됨.
   Bootstrap 네비게이션 컨테이너에 한정해 visibility 강제 복구. */
.navbar-collapse.collapse {
  visibility: visible !important;
}

/* ==================================================================
   LU치과 스타일 헤더 (묶음 1)
   참고: LU-VS-ATELIER-HEADER.md / 수치만 차용, CSS 직접 복사 X
   - position fixed + 흰 배경
   - 메뉴 굵게(600) + 18px
   - 호버 효과: pill → 하단 2px 밑줄 (deepPink)
   - active route 표시: 현재 메뉴 li.active에 밑줄 유지
   - 스크롤시 box-shadow (header-scrolled class via JS)
   ================================================================== */

/* 1. 헤더 fixed + 흰 배경 */
header.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  background: #fff !important;
  transition: box-shadow 0.3s ease !important;
}
/* 헤더 내부 sticky/bg-section의 투명 배경도 흰색으로 통일 */
header.main-header .header-sticky {
  background: #fff !important;
}

/* 2. 스크롤시 box-shadow (JS가 .header-scrolled 추가) */
header.main-header.header-scrolled {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
}

/* 3. body padding-top — fixed 헤더 가림 방지
   현재 헤더 높이 ~110px. LU는 90px이지만 우리 컨테이너 padding이 더 두꺼워
   실측에 맞춤. 모바일은 좀 작게. */
body {
  padding-top: 110px;
}
@media (max-width: 991px) {
  body { padding-top: 70px; }
}

/* 4. 메뉴 폰트 weight + size + 색
   .main-menu .nav-menu-wrapper > ul > li > a 가 우리 정확한 셀렉터
   (.main-menu > ul은 사이에 nav-menu-wrapper div가 있어 안 매칭됨) */
.main-menu .nav-menu-wrapper > ul > li > a {
  font-weight: 600 !important;
  font-size: 18px !important;
  color: #000 !important;
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color 0.3s ease !important;
}

/* 5. 호버 색상만 (pill 배경 없음) */
.main-menu .nav-menu-wrapper > ul > li > a:hover,
.main-menu .nav-menu-wrapper > ul > li > a:focus,
.main-menu .nav-menu-wrapper > ul > li:hover > a {
  background: transparent !important;
  color: var(--primary-color) !important;  /* #7A4EA1 deep purple */
}

/* 6. 하단 2px 밑줄 (LU 시그니처, ::before 가상 요소)
   기존 padding 15px라 양 끝에서 15px 안쪽까지 밑줄이 그어지도록 width 계산.
   호버 + active 상태에서 활성화. */
.main-menu .nav-menu-wrapper > ul > li > a::before {
  content: '' !important;
  position: absolute !important;
  bottom: 5px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--primary-color) !important;
  transform: translateX(-50%) !important;
  transition: width 0.4s ease !important;
}
.main-menu .nav-menu-wrapper > ul > li > a:hover::before,
.main-menu .nav-menu-wrapper > ul > li.active > a::before,
.main-menu .nav-menu-wrapper > ul > li:hover > a::before {
  width: calc(100% - 30px) !important;  /* 좌우 padding 15px씩 빼기 */
}

/* ---------------------------------------------------------------------------
   9. 미세 조정
   --------------------------------------------------------------------------- */
/* Pretendard는 Sora보다 line-height 감각이 살짝 좁음. 본문만 완충 */
body { line-height: 1.7; }

/* 링크/버튼 hover 시 accent(라벤더) → 텍스트가 붕 뜨는 현상 방지 */
a:hover { color: var(--primary-color); }