@import url("atrinu-scroll-reveal.css");

/* 메인·시술 상세 공통: 헤더·기본 타이포 */
:root {
  --title-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --theme-color: #bb9457;
  --atrinu-gold-light: #d9bc7c;
  --atrinu-header-booking-bg: #1a3d6f;
  /* 상담예약 버튼(#1a3d6f)과 같은 hue, 넓은 면(푸터)용 어두운 톤 */
  --atrinu-footer-booking-bg: #0c1a2e;
  --atrinu-footer-booking-gradient: linear-gradient(180deg, #0f2647 0%, #0c1a2e 42%, #081522 100%);
  /* 메인 히어로 미디어 바 — 상담예약 버튼(#1a3d6f)보다 어두운 네이비 그라데이션 */
  --atrinu-hero-media-gradient: linear-gradient(135deg, #081522 0%, #0f2647 48%, #15345c 100%);
  --atrinu-hero-media-accent: #15345c;
}

body.atrinu-proc-page {
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* 시술 상세: 메인과 동일 헤더, 항상 흰 네비(스크롤 후) 스타일 */
body.atrinu-proc-page .atrinu-header-hero {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

body.atrinu-proc-page .atrinu-header-hero .sticky-active {
  background-color: #fff;
}

body.atrinu-proc-page .atrinu-header-hero .sticky-wrap.will-sticky {
  min-height: 0 !important;
}

body.atrinu-proc-page .atrinu-header-hero .sticky-wrap.will-sticky .sticky-active,
body.atrinu-proc-page .atrinu-header-hero .sticky-wrap.will-sticky .sticky-active.active {
  position: relative !important;
  top: auto !important;
}

body.atrinu-proc-page .atrinu-proc-subnav-wrap {
  position: relative;
  z-index: 90;
}

/* 헤더 상담 예약 버튼 — 기본 네이비, 호버 핑크(서브카테고리) */
.atrinu-header-hero .vs-btn.style2 {
  background-color: var(--atrinu-header-booking-bg);
}

.atrinu-header-hero .vs-btn.style2::before,
.atrinu-header-hero .vs-btn.style2::after {
  background-color: #db68eb;
}

.atrinu-header-hero .vs-btn.style2:hover,
.atrinu-header-hero .vs-btn.style2:focus-visible {
  color: #fff;
}

.atrinu-header-hero .vs-btn.style2:hover::before,
.atrinu-header-hero .vs-btn.style2:focus-visible::before {
  background-color: #db68eb;
}

.atrinu-header-hero .vs-btn.style2:hover::after,
.atrinu-header-hero .vs-btn.style2:focus-visible::after {
  background-color: #ee88b4;
}

/* 모바일 햄버거 박스 — 상담예약 버튼과 동일 네이비 */
@media (max-width: 991.98px) {
  .atrinu-header-hero .header-icons .vs-menu-toggle {
    background-color: var(--atrinu-header-booking-bg);
    color: #fff;
    text-shadow: none;
  }

  .atrinu-header-hero .header-icons .vs-menu-toggle:hover,
  .atrinu-header-hero .header-icons .vs-menu-toggle:focus-visible {
    background-color: #153456;
    color: #fff;
  }

  body.atrinu-hero-overlap .atrinu-header-hero .sticky-active .header-icons .vs-menu-toggle {
    background-color: var(--atrinu-header-booking-bg);
    color: rgba(255, 255, 255, 0.98);
    text-shadow: none;
  }

  body.atrinu-hero-overlap.atrinu-header-scrolled .atrinu-header-hero .sticky-active .header-icons .vs-menu-toggle {
    background-color: var(--atrinu-header-booking-bg);
    color: rgba(255, 255, 255, 0.98);
    text-shadow: none;
  }
}

/* 사이드메뉴 — 로그인 / 회원가입 */
.atrinu-sidemenu-auth {
  margin-top: clamp(1.25rem, 4vw, 1.75rem);
}
.atrinu-sidemenu-auth__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.atrinu-sidemenu-auth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: clamp(0.9rem, 2.4vw, 0.98rem);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  word-break: keep-all;
}
.atrinu-sidemenu-auth__btn--login {
  color: #1a234e;
  background: #fff;
  border: 1px solid rgba(26, 35, 78, 0.22);
}
.atrinu-sidemenu-auth__btn--login:hover,
.atrinu-sidemenu-auth__btn--login:focus-visible {
  background: #f5f6fa;
  border-color: rgba(26, 35, 78, 0.38);
  color: #1a234e;
}
.atrinu-sidemenu-auth__btn--signup {
  color: #fff;
  background: var(--theme-color, #bb9457);
  border: 1px solid var(--theme-color, #bb9457);
}
.atrinu-sidemenu-auth__btn--signup:hover,
.atrinu-sidemenu-auth__btn--signup:focus-visible {
  background: #a8844d;
  border-color: #a8844d;
  color: #fff;
}

/* 데스크톱 GNB 서브메뉴 — 다크 글래스 패널 */
.atrinu-header-hero .main-menu > ul > li > ul.sub-menu {
  left: 50%;
  transform: translateX(-50%);
}

.atrinu-header-hero .main-menu ul.sub-menu {
  --atrinu-nav-dropdown-text: rgba(255, 255, 255, 0.86);
  --atrinu-nav-dropdown-text-hover: #fff;
  --atrinu-nav-dropdown-accent: var(--atrinu-gold-light, #d9bc7c);
  --atrinu-nav-dropdown-accent-soft: rgba(219, 104, 235, 0.55);
  min-width: 13.75rem;
  padding: 0.55rem;
  margin-top: 0.35rem;
  border: 1px solid rgba(217, 188, 124, 0.28);
  border-top: 2px solid rgba(217, 188, 124, 0.62);
  border-bottom: none;
  border-radius: 0.85rem;
  background:
    linear-gradient(165deg, rgba(12, 26, 46, 0.97) 0%, rgba(15, 38, 71, 0.95) 48%, rgba(21, 52, 92, 0.93) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.atrinu-header-hero .main-menu ul.sub-menu::before {
  display: none;
}

.atrinu-header-hero .main-menu ul.sub-menu li {
  margin: 0;
  padding: 0;
}

.atrinu-header-hero .main-menu ul.sub-menu li + li {
  margin-top: 0.15rem;
}

.atrinu-header-hero .main-menu ul.sub-menu li a {
  position: relative;
  display: block;
  padding: 0.7rem 0.95rem 0.7rem 1.05rem;
  border-radius: 0.55rem;
  border-left: 2px solid transparent;
  color: var(--atrinu-nav-dropdown-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.atrinu-header-hero .main-menu ul.sub-menu li a::before {
  display: none;
}

.atrinu-header-hero .main-menu ul.sub-menu li a:hover,
.atrinu-header-hero .main-menu ul.sub-menu li a:focus-visible {
  color: var(--atrinu-nav-dropdown-text-hover);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-left-color: var(--atrinu-nav-dropdown-accent);
  transform: translateX(2px);
}

.atrinu-header-hero .main-menu ul.sub-menu li.menu-item-has-children > a::after {
  color: rgba(255, 255, 255, 0.55);
}

.atrinu-header-hero .main-menu ul.sub-menu li ul.sub-menu {
  left: calc(100% + 0.45rem);
  top: -0.55rem;
  margin-left: 0;
  transform: none;
  border-radius: 0.75rem;
}

@media (max-width: 1199.98px) {
  .atrinu-header-hero .main-menu ul.sub-menu {
    min-width: 12.5rem;
  }

  .atrinu-header-hero .main-menu ul.sub-menu li a {
    font-size: 0.9rem;
    padding: 0.62rem 0.85rem;
  }
}