@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;
}