/* ============================================================
   SKINBOOSTER PAGE — 전용 컴포넌트 스타일 (skinbooster.css)
   기존 detail.css 의 컬러 변수·폰트 변수·섹션 규격을 그대로 재사용하며
   본 파일은 스킨부스터 페이지에서만 필요한 신규 컴포넌트만 추가합니다.
   ============================================================ */

section[id] {scroll-margin-top:170px;}

:root {--color-rejuran-effect-shape:#e0f0e7;}

#section-rejuran-effect {background:var(--color-white);}
#section-rejuran-effect .effect-item {border-color:var(--color-rejuran-effect-shape);}

.section-intro.skinbooster-hero::before {background-image:url('../images/skinbooster-hero-bg.jpg');}

.quick-nav-section {padding:24px 0;background:var(--color-white);border-bottom:1px solid var(--color-gray-mid);position:sticky;top:80px;z-index:900;box-shadow:0 4px 16px rgba(0,0,0,0.05);}
.quick-nav-list {max-width:var(--inner-max);margin:0 auto;padding:var(--inner-pad);display:flex;flex-wrap:wrap;gap:14px;justify-content:center;list-style:none;}
.quick-nav-btn {display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;border-radius:40px;background:var(--color-gray-light);color:var(--color-black);font-family:var(--font-ko);font-size:15px;font-weight:500;transition:background 0.3s ease,color 0.3s ease;}
.quick-nav-btn:hover {background:var(--color-green);color:var(--color-white);}

.product-divider-wrap {padding:80px 0 0;background:var(--color-white);}
.product-divider {max-width:var(--inner-max);margin:0 auto;padding:var(--inner-pad);display:flex;align-items:baseline;gap:24px;}
.product-divider-num {font-family:var(--font-en);font-size:56px;font-weight:300;color:var(--color-green);line-height:1;}
.product-divider-name {font-family:var(--font-ko);font-size:22px;font-weight:600;color:var(--color-black);white-space:nowrap;}
.product-divider-line {flex:1;height:1px;background:var(--color-gray-mid);}

.principle-steps.cols-3 {grid-template-columns:repeat(3,1fr);}

.section-compare {padding:var(--section-padding);background:var(--color-white);}
.section-compare.bg-gray {background:var(--color-gray-light);}
.compare-table-wrap {overflow-x:auto;border-radius:var(--radius);background:var(--color-white);box-shadow:0 4px 24px rgba(0,0,0,0.06);}
.compare-table {width:100%;border-collapse:collapse;min-width:640px;}
.compare-table caption {position:absolute;font-size:0;line-height:0;overflow:hidden;}
.compare-table th,.compare-table td {padding:26px 24px;text-align:center;font-family:var(--font-ko);font-size:16px;font-weight:400;color:var(--color-black);border-bottom:1px solid var(--color-gray-mid);}
.compare-table thead th {font-size:19px;font-weight:600;padding:30px 24px;border-bottom:2px solid var(--color-gray-mid);}
.compare-table .compare-row-label {text-align:left;font-weight:500;color:var(--color-gray-text);background:var(--color-gray-light);width:220px;}
.compare-table tbody tr:last-child td {border-bottom:0;}
.compare-highlight {background:var(--color-green-light);}
.compare-table thead .compare-highlight {background:var(--color-green);color:var(--color-white);}
.compare-highlight-tag {display:inline-block;margin-top:8px;padding:4px 14px;border-radius:20px;background:var(--color-green);color:var(--color-white);font-family:var(--font-ko);font-size:12px;font-weight:500;}

.section-point {padding:var(--section-padding);background:var(--color-white);}
.point-cards {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.point-card {background:var(--color-gray-light);border-radius:var(--radius);padding:44px 40px;}
.point-num {font-family:var(--font-ko);font-size:14px;font-weight:600;color:var(--color-green);text-transform:uppercase;display:block;margin-bottom:18px;}
.point-title {font-family:var(--font-ko);font-size:21px;font-weight:500;color:var(--color-black);line-height:1.4;margin-bottom:14px;}
.point-desc {font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.8;opacity:0.72;}

.point-card.has-image {padding:0;overflow:hidden;}
.point-img-wrap {overflow:hidden;}
.point-img {width:100%;height:220px;object-fit:cover;display:block;transition:transform 0.7s ease;}
.point-img-wrap:hover .point-img {transform:scale(1.05);}
.point-card-body {padding:32px 40px 40px;}

#section-babyshot-point .point-img-wrap {width:628px;height:300px;max-width:100%;margin:0 auto;}
#section-babyshot-point .point-img {width:100%;height:300px;}

#section-juvelookeye-point {background:var(--color-gray-light);}
#section-juvelookeye-point .point-card {background:var(--color-white);display:flex;align-items:flex-start;gap:24px;padding:30px;}
.point-thumb-wrap {flex-shrink:0;width:120px;height:150px;border-radius:var(--radius);overflow:hidden;}
.point-thumb-img {width:100%;height:100%;object-fit:cover;display:block;}
.point-body {flex:1;min-width:0;}

.section-part {padding:var(--section-padding);background:var(--color-white);}
.section-part.bg-gray {background:var(--color-gray-light);}
.part-cards {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.part-card {background:var(--color-white);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.05);}
.part-img-wrap {overflow:hidden;}
.part-img {width:100%;height:220px;object-fit:cover;transition:transform 0.7s ease;}
.part-img:hover {transform:scale(1.05);}
.part-name {padding:22px 20px;text-align:center;font-family:var(--font-ko);font-size:19px;font-weight:500;color:var(--color-black);}

@media (max-width:1100px) {
  .point-cards {grid-template-columns:1fr;}
  .part-cards {grid-template-columns:repeat(2,1fr);}
  .principle-steps.cols-3 {grid-template-columns:repeat(2,1fr);}
  .product-divider-num {font-size:44px;}
}

@media (max-width:768px) {
  .quick-nav-section {padding:16px 0;}
  .quick-nav-list {gap:10px;}
  .quick-nav-btn {padding:12px 22px;font-size:14px;}
  .product-divider-wrap {padding:56px 0 0;}
  .product-divider {gap:16px;}
  .product-divider-num {font-size:36px;}
  .product-divider-name {font-size:18px;}
  .part-cards {grid-template-columns:1fr;}
  .principle-steps.cols-3 {grid-template-columns:1fr;}
  .compare-table th,.compare-table td {padding:18px 16px;font-size:14px;}
  .compare-table thead th {font-size:16px;padding:20px 16px;}
  .point-card {padding:32px 28px;}
  .point-card-body {padding:24px 28px 32px;}
  .point-thumb-wrap {width:80px;height:100px;}
}

@media (max-width:480px) {
  .quick-nav-section {top:64px;}
  section[id] {scroll-margin-top:150px;}
}