/* ============================================================
   ACNE PAGE — 여드름(네오젠 플라즈마 · 클라리티2) 전용 스타일 (acne.css)
   ※ 기존 detail.css의 구조·스타일은 그대로 두고,
     이 페이지에서만 필요한 "배경 이미지 경로"만 추가합니다.
   ============================================================ */

/* ── 인트로 히어로 배경 (페이지 전용 이미지로 교체) ── */
/* [히어로 배경 이미지 들어갈 곳] */
#section-intro::before {background-image:url('../images/acne-hero-bg.jpg');}

/* ── Q&A 섹션 배경 (페이지 전용 이미지로 교체) ── */
/* [Q&A 배경 이미지 들어갈 곳] */
#section-qna-neogen::before,
#section-qna-clarity::before {background-image:url('../images/acne-qna-bg.jpg');}

/* ============================================================
   QUICK NAV — 시술 바로가기 (히어로 하단 / 스크롤 시 헤더 하단 고정)
   ============================================================ */
.quick-nav {position:sticky;top:80px;left:0;width:100%;z-index:800;background:var(--color-white);border-bottom:1px solid var(--color-gray-mid);}
.quick-nav-inner {max-width:var(--inner-max);margin:0 auto;padding:20px 60px;display:flex;align-items:center;justify-content:center;gap:16px;}
.quick-nav-btn {display:flex;align-items:center;justify-content:center;flex:1;max-width:260px;height:52px;padding:0 24px;background:var(--color-gray-light);color:var(--color-black);font-family:var(--font-ko);font-size:16px;font-weight:500;border-radius:999px;transition:background 0.3s ease,color 0.3s ease;text-align:center;}
.quick-nav-btn:hover,
.quick-nav-btn.active {background:var(--color-green);color:var(--color-white);}

/* ── 반응형 ── */
@media (max-width:1500px) {
  .quick-nav-inner {padding:20px 48px;}
}
@media (max-width:1100px) {
  .quick-nav-inner {padding:16px 40px;}
}
@media (max-width:1060px) {
  .quick-nav {top:64px;}
}
@media (max-width:768px) {
  .quick-nav-inner {padding:14px 20px;gap:10px;}
  .quick-nav-btn {height:46px;font-size:15px;padding:0 16px;}
}
@media (max-width:480px) {
  .quick-nav {top:64px;}
}