/* ============================================================
   PORE & SCAR PAGE — 전용 추가 스타일 (pore-scar.css)
   ※ default.css / header.css / detail.css 의 기존 규칙은 절대 재정의하지 않음
   ※ 컬러/폰트/라운드 값은 detail.css 의 CSS 변수(:root)를 그대로 상속하여 사용
   ============================================================ */

/* ── 인트로 헤드 이미지 (페이지 전용 배경만 교체, 레이아웃/구조 값은 detail.css 그대로 사용) ── */
/* [헤드 이미지 들어갈 곳] : 아래 url 경로의 이미지를 교체해 주세요 */
.section-intro::before {background-image:url('../images/pore-scar-hero-bg.jpg');}

/* ============================================================
   STICKY TREATMENT NAV — 상단 4개 시술 바로가기 버튼 (스크롤 시 상단 고정)
   ============================================================ */
.section-treatment-nav {position:sticky;top:80px;z-index:800;background:var(--color-white);border-bottom:1px solid var(--color-gray-mid);padding:20px 0;}
.treatment-nav-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.treatment-nav-btn {display:flex;align-items:center;justify-content:center;height:56px;background:var(--color-gray-light);border-radius:var(--radius);font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--color-black);transition:background 0.3s ease,color 0.3s ease;text-align:center;}
.treatment-nav-btn:hover {background:var(--color-green);color:var(--color-white);}

/* ============================================================
   시술별 첫 구간(앵커 대상) — 스티키 내비 높이만큼 스크롤 여백 확보
   ============================================================ */
#section-multicell,
#section-silkwave,
#section-neogen,
#section-picofraxel {scroll-margin-top:96px;}

/* ============================================================
   실크웨이브 다양한 팁 활용 — 5개 카드 배치 전용 오버라이드
   (TIP01~03 첫 줄 3개, TIP04~05 둘째 줄 2개를 가운데 정렬)
   ※ detail.css 의 .principle-steps(4열 그리드) 규칙은 다른 섹션에서 그대로 유지되며
     이 섹션(#section-silkwave-tips)에서만 flex 레이아웃으로 덮어씀
   ============================================================ */
#section-silkwave-tips {background:var(--color-white);}
#section-silkwave-tips .principle-steps {display:flex;flex-wrap:wrap;justify-content:center;}
#section-silkwave-tips .principle-step {flex:0 1 calc(33.333% - 16px);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .treatment-nav-list {grid-template-columns:repeat(2,1fr);}
  #section-silkwave-tips .principle-step {flex:0 1 calc(50% - 12px);}
}
@media (max-width:768px) {
  .section-treatment-nav {top:64px;padding:14px 0;}
  .treatment-nav-list {grid-template-columns:repeat(2,1fr);gap:10px;}
  .treatment-nav-btn {height:48px;font-size:15px;}
  #section-multicell,
  #section-silkwave,
  #section-neogen,
  #section-picofraxel {scroll-margin-top:80px;}
  #section-silkwave-tips .principle-step {flex:0 1 100%;}
}