/* ===========================================================================
   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;
}

/* 1-1. 헤더 높이 80px(LU --hdH 패턴)에 맞춰 .navbar 위아래 padding 압축
   Glowix custom.css:529 .navbar { padding: 30px 0 } 60px → 30px(15+15)로 축소.
   콘텐츠 max 50px(로그인 버튼 .btn-highlighted padding 17px 25px) + 30 = 80px. */
header.main-header .navbar {
  padding: 15px 0 !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 헤더 가림 방지
   LU 패턴: --hdH 80px (1640~2000px viewport), 모바일 70px
   아뜰리에 신규 로고(en 28 + kr 10 + margin 4 = 42px) + navbar padding(15+15=30) + 콘텐츠 max 50 = 80px */
body {
  padding-top: 80px;
}
@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. 헤더 3분할 레이아웃 (1024px+)
   로고(좌) — 메뉴(중앙) — 로그인 버튼(우)

   구조:
     .container-fluid (Bootstrap navbar flex 컨테이너, justify-content: space-between)
       ├ .navbar-brand            ← 로고 (좌)
       └ .navbar-collapse.main-menu  ← 잔여 공간 차지 (flex)
           ├ .nav-menu-wrapper       ← 메뉴 (mx-auto로 중앙)
           └ .header-contact-btn     ← 로그인 (자연스럽게 우측 정렬)

   모바일(<1024px)은 Bootstrap navbar-expand-lg(992px)가 햄버거로 전환하므로
   이 규칙은 적용되지 않음 → 기존 오버레이 메뉴 구조 그대로 유지.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* 메뉴 묶음을 flex로 펼치고 잔여 공간을 모두 차지 */
  header.main-header .navbar-collapse.main-menu {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
  }
  /* nav-menu-wrapper는 Glowix custom.css:539에서 flex:1 + text-align:left가
     이미 걸려있음. wrapper가 잔여 공간 전부를 차지(=flex:1)하므로
     mx-auto는 흡수할 free space가 없어 무효 → text-align만 center로 바꾸면
     안쪽 ul(.navbar-nav, display:inline-flex)이 자연스럽게 가운데 정렬됨.
     로그인 버튼(.header-contact-btn)은 wrapper의 flex:1 덕분에 우측 끝으로 밀려남. */
  header.main-header .nav-menu-wrapper {
    text-align: center !important;
  }
  /* Bootstrap의 .mr-auto(=margin-right:auto)는 inline-flex된 ul을 좌측으로
     끌어붙이려 시도. text-align 정렬을 살리려면 무력화 필요. */
  header.main-header .nav-menu-wrapper > ul.navbar-nav.mr-auto {
    margin-right: 0 !important;
  }
  /* 로그인 버튼은 줄어들지 않도록 고정 */
  header.main-header .header-contact-btn {
    flex-shrink: 0;
  }

  /* 서브메뉴 폭: Glowix 원본 235px 고정 → 콘텐츠 fit + 160px 안전선
     - custom.css:586 .main-menu ul ul { width: 235px } 와
       custom.css:596 .main-menu ul li.submenu:first-child ul { width: 235px } 를 덮음
     - ul이 position:absolute라 width:auto면 shrink-to-fit 동작
     - min-width 160px: 가장 긴 sub("아뜰리에 임플란트" a박스 155px) + 5px 여유
       짧은 sub(심미/자연치아보존, 95px)이 너무 옹색해지는 것 방지
     - li padding(좌우 20px)은 Glowix 원본 그대로 사용 */
  header.main-header .main-menu ul ul,
  header.main-header .main-menu ul li.submenu:first-child ul {
    width: auto !important;
    min-width: 160px !important;
  }
  header.main-header .main-menu ul ul li {
    white-space: nowrap;
  }
}

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

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

/* ---------------------------------------------------------------------------
   11. Atelier 로고 (Vogue V1 — 영문 워드마크 + 한글 부제)
   header-glowix.blade.php에서 .navbar-brand → .atelier-logo로 교체.
   인라인 스타일 제거하고 컴포넌트 클래스로 정리.
   --------------------------------------------------------------------------- */
.atelier-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  line-height: 1;
  padding: 0;                     /* LU 80px 헤더에 맞춰 로고 자체 padding 제거 */
  transition: opacity 0.2s ease;
}
.atelier-logo:hover {
  opacity: 0.7;
}
.atelier-logo-en {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;                /* 38→28: LU 헤더 80px 맞춤 */
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #2C2C2A;
  line-height: 1;
}
.atelier-logo-kr {
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 10px;                /* 11→10 */
  font-weight: 300;
  letter-spacing: 0.5em;
  color: #6F5680;
  margin-top: 4px;                /* 6→4 */
  /* letter-spacing이 우측 여백을 만들어 시각 중앙이 우측으로 밀림 → 좌측 0.5em 보정 */
  padding-left: 0.5em;
}
@media (max-width: 480px) {
  .atelier-logo-en { font-size: 24px; }
  .atelier-logo-kr { display: none; }
}