/* ============================================================
   BODY CONTOURING PAGE — 전용 추가 컴포넌트 (body-contouring.css)
   ※ 색상·폰트·라운드·여백 값은 detail.css의 CSS 변수만 사용합니다.
   컬러: 화이트 #ffffff / 그린 #77ac8e / 밝은그레이 #f5f5f5 / 블랙 #111111
   ============================================================ */

/* ── INTRO 배경 이미지 (바디 컨투어링 전용 헤드 이미지) ── */
.section-intro-body::before {background-image:url('../images/body-contouring-hero-bg.jpg');}
/* [제품 사진 들어갈 곳] 헤드 이미지 — 바디 컨투어링 전신 라인 이미지로 교체 */

/* ── QUICK NAV: 프로그램 바로가기 (헤더 하단 고정 바, 280x56 버튼 5×2열) ── */
.section-quicknav {position:sticky;top:80px;left:0;width:100%;z-index:800;background:var(--color-white);border-bottom:1px solid var(--color-gray-mid);padding:16px 24px;}
.quick-nav-list {list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1496px;}
.quick-nav-row1 {margin-bottom:12px;}
.quick-nav-list li {flex:0 0 280px;width:280px;height:56px;}
.quick-nav-btn {display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 16px;background:var(--color-gray-light);border-radius:999px;font-family:var(--font-ko);font-size:16px;font-weight:500;color:var(--color-black);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.3s ease,color 0.3s ease;word-break:keep-all;}
.quick-nav-btn:hover {background:var(--color-green);color:var(--color-white);}

/* ── 프로그램 구획: 스크롤 시 헤더+퀵내비 바에 가리지 않도록 여백 확보 ── */
.product-block {scroll-margin-top:156px;}

/* ── 시술 부위 그리드 (이미지 + 부위명) ── */
.parts-grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.parts-item {display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--color-gray-light);border-radius:var(--radius);overflow:hidden;padding-bottom:22px;}
.parts-img-wrap {width:100%;aspect-ratio:1/1;overflow:hidden;}
.parts-img {width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.parts-item:hover .parts-img {transform:scale(1.06);}
.parts-label {margin-top:16px;font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--color-black);}
.parts-wrap-margin {margin-top:24px;}

/* ── 주의사항 리스트 (recommend-list와 동일한 시각 언어, 아이콘만 대체) ── */
.caution-wrap {max-width:900px;margin:0 auto;}
.caution-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.caution-item {display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--color-gray-mid);font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.65;word-break:keep-all;}
.caution-item:first-child {border-top:1px solid var(--color-gray-mid);}
.caution-mark {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin-top:3px;border-radius:50%;background:#86cc9b;color:var(--color-white);font-family:var(--font-en);font-size:14px;font-weight:700;line-height:1;}

/* ── 바디보톡스 시술 부위: 3열 2행 배열로 카드 6개 가운데 정렬 ── */
#bodybotox-parts .parts-grid {grid-template-columns:repeat(3,1fr);}

/* ── 리바이브 시술 특징: 배경 색상 및 카드(01~03) 가운데 정렬, 카드 기본 색상 수정 ── */
#revive-features {background:#f5f5f5;}
#revive-features .tech-cards {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
#revive-features .tech-card {flex:0 0 calc((100% - 72px) / 4);width:calc((100% - 72px) / 4);background:#ffffff;}
#revive-features .tech-card:hover {background:var(--color-green);}

/* ── 바디필러 시술 부위: 카드(골반/힙업/힙딥) 가운데 정렬 ── */
#bodyfiller-parts .parts-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
#bodyfiller-parts .parts-item {flex:0 0 calc((100% - 72px) / 4);width:calc((100% - 72px) / 4);}

/* ── 리바이브 핵심 기술: 배경 색상 수정 ── */
#revive-tech {background:#ffffff;}

/* ── 리브팻 주사 시술 부위: 3열 2행 배열 ── */
#revefat-parts .parts-grid {grid-template-columns:repeat(3,1fr);}

/* ── 위고비 주사 효과 / 주의사항: 배경 색상 수정 ── */
#wegovy-effect {background:#ffffff;}
#wegovy-caution {background:#f5f5f5;}

/* ── 마운자로 주사 효과 / 주의사항: 배경 색상 수정 ── */
#mounjaro-effect {background:#ffffff;}
#mounjaro-caution {background:#f5f5f5;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1500px) {
  .quick-nav-list li {flex:0 0 calc((100% - 48px) / 5);width:auto;}
}
@media (max-width:1100px) {
  .quick-nav-list li {flex:0 0 calc((100% - 24px) / 3);height:52px;}
  .quick-nav-btn {font-size:15px;}
  .quick-nav-row1 {margin-bottom:10px;}
  .parts-grid {grid-template-columns:repeat(3,1fr);}
  #revive-features .tech-card {flex:0 0 calc((100% - 24px) / 2);width:calc((100% - 24px) / 2);}
  #bodyfiller-parts .parts-item {flex:0 0 calc((100% - 48px) / 3);width:calc((100% - 48px) / 3);}
}
@media (max-width:768px) {
  .section-quicknav {padding:12px 16px;}
  .quick-nav-list {gap:8px;}
  .quick-nav-list li {flex:0 0 calc((100% - 8px) / 2);height:48px;}
  .quick-nav-btn {padding:0 12px;font-size:14px;}
  .parts-grid {grid-template-columns:repeat(2,1fr);gap:14px;}
  .parts-label {font-size:16px;}
  .caution-item {font-size:16px;}
  #bodybotox-parts .parts-grid {grid-template-columns:repeat(2,1fr);}
  #revive-features .tech-card {flex:0 0 100%;width:100%;}
  #revefat-parts .parts-grid {grid-template-columns:repeat(2,1fr);}
  #bodyfiller-parts .parts-grid {gap:14px;}
  #bodyfiller-parts .parts-item {flex:0 0 calc((100% - 14px) / 2);width:calc((100% - 14px) / 2);}
}
@media (max-width:480px) {
  .section-quicknav {top:64px;}
  .product-block {scroll-margin-top:132px;}
  .quick-nav-btn {font-size:13px;padding:0 8px;}
}